...

View Full Version : Border width issue.



Gorstag
05-07-2006, 11:07 PM
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>

_Aerospace_Eng_
05-07-2006, 11:17 PM
Check out this example http://www.codingforums.com/showpost.php?p=391247&postcount=4

Gorstag
05-07-2006, 11:24 PM
Thanks,

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

Arbitrator
05-08-2006, 07:28 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum