CODEWITHSUNDEEP
htmlcss
aacid
aacid

Reputation: 199

two divs on top of each other while third after them

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?

Upvotes: 0

Views: 166

Answers (2)

Rupo
Rupo

Reputation: 402

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/

Upvotes: 1

Justin
Justin

Reputation: 1329

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.)

Upvotes: 1

Related Questions