Border width issue.

I am using a 3 border design around an image. Basically made a wooden frame using CSS to place images within. The frame dynamically changes height depending on the size of the image but the problem is all 3 borders automaticallly fills 100% of the width of the screen. My end goal is to have this entire object fixed in the dead center of a absolute width page.

What I need to figure out is how to have the width of the borders collapse in to the current width of image within the content section.

Here's the css (Nothing in short hand cause I'm trying to find the problem and im still new to this!)

(CSS)
#oborder {

margin-top: 30px;
margin-bottom: 30px;
padding-top: 10px;
padding-bottom: 10px;
Padding-left: 20px;
padding-right: 20px;
background-image: url(../img/oak.jpg);
border-color: brown;
border-width: 2px;
border-style: solid;
}



#iborder {

background-image: url(../img/oak.jpg);
border-color: brown;
border-width: 1px;
border-style: solid;
}


#content {

border-color: brown;
border-style: solid;
border-width: 2px;
padding: 1px;
margin: 3px;
}

(HTML)
<div id="oborder">
<div id="iborder">
<div id="content">
<img src="img/test.JPG"></img>

</div>
</div>
</div>

Check out this example http://www.codingforums.com/showpost.php?p=391247&postcount=4

Thanks,

I'll play around with it and get back to you.

There's <div style="display: table-cell;"></div> which makes the div act like a table-cell in that you can use vertical positioning (vertical-align) and the div expands to fit the content with a default width of zero. Unfortunately Internet Explorer 6 and 7 don't support this CSS property.