Border Dilema

[Hube]

I have a dilema. I do not want to use divitis to come up with a solution to this problem, but it is all that I can see to do at the moment.

The situation is this. The Client wants a border around the content area of the site. This border will be created with image and the css border styles are useless. I have the four corners and the four sides that must be include. This content box will need to expand and contract in both height and width. I see two options, to nest Div's 8 deep, one for each side and one for each corner; building the border in layers, or 5 neseted divs, still building in layers but instead of using a 1 pixel wide image for the sides of the border I instead use extremely long or tall images at the corners on one end with the far corners being smaller images.

Hopefully I have not confused anyone. Sorry I cann not put up an example of this at the moment.

The question is, is there any way to do this without the use of all of the nested divisions? Keep in mind that this box needs to appear as a box no matter how much content is in it; even if that means there is nothing at all in it.

Thanks

[willybfriendly]

I had a similar problem a couple o years ago.

I nested one div inside another, with another div at top and bottom to complete the border.

.top
{
background-image: url(images/topbrdr.jpg);
background-repeat: repeat-x;
height: 20px;
margin-top:0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
.vert
{
background-image: url(images/lftbrdr.jpg);
background-repeat: repeat;
margin-top:0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 20px;
}
.copy
{
background-image: url(images/lemonsquash.jpg);
background-repeat: repeat;
font-family: verdana,helvetica,arial,sans-serif;
text-align:left;
margin:0px;
padding: 0px;
border: solid black 1px;
line-height: 1.4em;
padding-left:10px;
padding-right:10px;
}

<div class="container">
<div class ="top"></div>
<div class="vert">
<div class="copy">
</div>
</div>
<div class="top"></div>
</div>

With the correct image for the border it would only take two divs rather than the four here. Just a matter of tweaking padding and margins.

At the risk of having the url drop deleted, look here [bigbaer.com]