border on side to continue all the way down dynamic page?

Question

Have a border, bgr_left.jpg, that I want to continue down the y-axel on my page...

the bgr_left.jpg is 30px by 30px and I have placed it in a div tag... Also I want the same border on the right side, and on the top all the way across...

I cant get this done, heres my css for the left border:

.bgr_left {
    background-image: url(../Graphics/bgr_left.jpg);
    background-repeat: repeat-y;
    background-position: left;
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 30px;
    background-color: #E7F5F0;
}

Thanks for all help

Answer 1

You can do this using a table or by dynamically sizing a div.

Table method

Although something like this should fine in a web browser, search engines and other computer consumers might misinterpret it because you using the table tag to markup non-tabular content.

<table>
  <tr>
    <td colspan="3" class="bgr_top"/>
  </tr>
  <tr>
    <td class="bgr_left" />
    <td>Content content content</td>
    <td class="bgr_bottom" />
  </tr>
  <tr>
    <td colspan="3" class="bgr_bottom"/>
  </tr>
</table>

Dynamic div

With the help of jQuery, we can emit semantically correct HTML but also create the desired rendering in web browsers. Untested sample:

<p class="bgr">Content content content</p>

<script type="text/javascript">
  $('.bgr').each(function(i,el){
    $('<div class="bgr_left"/>').height($(this).height()+'px').appendTo($(this));
    // similar for top, right, and bottom
  });
</script>