two divs on top of each other while third after them - html

Question

I have this layout:
<div id="content">
<div id="foreground">
</div>
<div id="background">
</div>
</div>
<div id="footer">
</div>
I need background div displayed under foreground div, this I have done using position:absolute and it works ok.
problem is after setting both foreground and background absolute position they are taken out of normal flow, parent div (content) has no real width and this screws up footer position.
#background
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
#foreground
{
position:absolute;
left:0px;
top:0px;
z-index:1;
}
#content
{
position:relative;
}
#footer
{
position:relative;
}
Content width is dynamic so I can't set absolute position to footer and I really would like to avoid some javascript hacks, is there any solution to this?

Answer 1

I would have done it like this:
HTML:
<div id="content">
<div id="foreground">
Row 1<br>
Row 2<br>
Row 3<br>
Row 4
</div>
<div id="background">
</div>
</div>
<div class="clear"></div>
<div id="footer">
The footer
</div>
CSS:
#background
{
float: left;
background-color: #ff0;
position:absolute;
left:0px;
top:0px;
z-index:-1;
width: 100%;
height: 100%;
display: block;
}
#foreground
{
float: left;
z-index:1;
}
#content
{
position:relative;
border: 1px solid #f00;
float: left;
width: 100%;
}
#footer
{
border: 1px solid #f0f;
position:relative;
width: 100%;
}
.clear
{
clear: both;
}
Fiddle: http://jsfiddle.net/4LSZK/

Answer 2

Is there a reason you can't set a height on #content? So, something like this:
#content {
border: 1px solid red;
position: relative;
height: 200px;
}
#foreground {
position: absolute;
top: 50px;
height: 100px;
width: 100%;
background: yellow;
z-index: 2;
}
#background {
position: absolute;
height: 100px;
width: 100%;
background: red;
z-index: 1;
}
#footer {
border: 1px solid red;
}
Here's a fiddle: http://jsfiddle.net/DuWRe/1/
(I've added some borders and backgrounds so each element's position can be easily identified.)