My current CSS project has hit a snag that I can't seem to solve:
There is a box on the left side of the site that contains three images - a top image, an optional and stretched middle image, and a bottom image.
I want this left box to automatically stretch if there is more content inside, just like how it already works for the right side with my current code. (Both columns are inside a container div, and the left box is set to height: 100.)
However, when I try to add content to the left box, it overflows because I have set its position to absolute. This prevents it from increasing in size.
I have tried various methods like float, but so far I haven't been able to achieve the desired effect without using position: absolute.
Below is an example of the code:
<body>
<div id="centerwrapper">
Header, etc.<br/>
<div id="verticalstretcher">
<div id="bgtop">
<div id="bgbottom">
<div id="bgmiddle">
</div>
</div>
</div>
<div id="content">
Content here will auto-stretch the container vertically (and the box to the left!)
</div>
</div>
Footer, etc.<br/>
</div>
</body>
And here is the corresponding stylesheet:
#centerwrapper {
width: 500px;
margin: 0 auto;
}
#verticalstretcher {
position: relative;
min-height: 280px; /* Sum of the top and bottom image height */
width: 100%;
background-color: orange;
}
#bgtop {
position: absolute;
width: 185px; /* width of the bg images */
height: 100%;
background: url(css/img/bg_navi_left_top.gif) no-repeat;
}
#bgbottom {
position: absolute;
width: 100%;
height: 100%;
background: url(css/img/bg_navi_left_bottom.gif) bottom no-repeat;
}
#bgmiddle {
position: absolute;
width: 100%;
top: 250px; /* Don't cover top GIF */
bottom: 15px; /* Don't cover bottom GIF */
background-color: yellow; /* Repeated image here */
}
#content {
margin-left: 200px; /* Start the text right from the box */
}
The structure looks like this (Color-coded for clarity):
https://i.sstatic.net/xw5a1.png
The yellow section is meant to be a stretched image, which I have omitted for simplicity, but it functions as intended.
Is it possible to add text to the left box that will also stretch it? Or should I switch to using a TABLE instead of CSS at this point?
EDIT: Here is how BitDrink's solution appears in my browser (current version of Firefox)
alt text http://img502.imageshack.us/img502/1241/layoutsample2.png