Forum Moderators: not2easy
I have my container.
On the left and right sides I have drop shadows. the reason I need seperate divs for them, is because the background is gradient and id like them to match -so I stick a long image at the beginning of each.
In between those, i've got a middle div which is where the content goes.
The problem is: the container and/or the left and right divs (div#side1 and div#side3) dont extend with the content.
By giving the container a specific height i can acheive what id like but the content is dynamic. i've read many (probably all) of the posts relating to this, but I just cant make sense of it all. my first go at this had side1 and side2 float left- side3 float right. what I have now is the three positioned absolutly... any help would be appreciated
The CSS police will not come and break down your door.
No. These days we freeze your assets. ;)
the container and/or the left and right divs (div#side1 and div#side3) dont extend with the content.
If your content area needs only one column (in other words, if there is no sidebar), this is actually very easy. I'll assume this is what you need for now. If you have a sidebar it's slightly more complicated, but not much.
Nesting is your friend in this sitution. If you can make it so the content sits nested inside of the divs that hold your background images, and so that it also controls their heights, it will work. With only one content column, nothing fancy is needed to make it control the parent divs's heights. (With two or three content-holding columns, floating is involved and extra code is needed to make the height work out correctly).
Set up a container with a nested container, then inside of that your content div. Apply the right side background to the outer container and position the image right. Apply the left side background to the inner container and position it left. Then nest the content inside and use left and right margins on it to move the content area in from the sides of the image. CSS is commented...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<title></title>
<style>
*{margin:0;padding:0;}
body{
background:#XXX; /*match to outer gradient image color*/
}
#outer_container{
width:300px; /*or whatever*/
margin:0 auto; /*centers*/
background:url(path/to/right_image.gif) right top repeat-y;
}
#inner_container{
background:url(path/to/left_image.gif) left top repeat-y;
}
#content{
margin:0 30px;/*match to width of the image plus desired spce between image and text*/
background:#XXX; /*match to inner image color*/
}
</style>
</head>
<body>
<div id="outer_container">
<div id="inner_container">
<div id="content">
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</body>
</html>
cEM
<snip>
sorry, no personal URLs. See forum charter [webmasterworld.com] for details.
</snip>
thanks
-s
[edited by: createErrorMsg at 7:55 pm (utc) on June 13, 2005]
