CSS Layering Divs

Question

I want 100% wide divs containing images to go down my page. On top of these divs, I want one 1210px wide div where I can put my content.

Example: http://mudchallenger.com/a-responsivee.html

Question: How can I get the blue box to touch the green box, while red box stays above the two?

Thank you!

I currently have this:

}
#green{
position: absolute;
float:center;
height: 500px;
width: 100%;
margin: 0 auto;
z-index:1;
background-color: green;
}
#blue{
position: relative;
float:center;
height: 500px;
width: 100%;
margin: 0 auto;
z-index:1;
background-color: blue;
}
#red{
position: relative;
float:center;
height: 800px;
width: 1210px;
margin: 0 auto;
z-index:2;
background-color: red;
}

Answer 1

EDIT: Scaled down version for fiddle:

http://jsfiddle.net/dc2bar/asy8Y/2/

HTML:

<div class="background-banner green">
    <div class="main-content red">
        <!-- content -->
    </div>
</div>
<div class="background-banner blue">
</div>

CSS:

.background-banner {
    height: 500px;
    width: 100%;
    margin: 0 auto;
    z-index:1;
}

.main-content {
    position: relative;
    height: 800px;
    width: 70%;
    margin: 0 auto;
    z-index:2;
}

.green{
    background-color: green;
}

.blue{
    background-color: blue;
}

.red{
    background-color: red;
}

EDIT yet again: removed invalid css rule.

Answer 2

Use background-images to accomplish what you want. Just stack your divs and it should work just fine. If you want your content to span two containers with background images, that's a different story, but the example you cite doesn't do that.

Here's a fiddle giving close to an implementation of what you want. Just replace the container background-colors with background-images and you'd have what you want.

http://jsfiddle.net/CfZu4/

HTML:

<div class="container">
    <div class="content">
    Blah
    </div>
</div>
<div class="container red">
    <div class="content">
    Blah
    </div>
</div>

CSS:

.container{
background-color:#00f;
height:200px;
clear:both;
}
.content{
float:right;
width:40%;
height:150px;
margin-top:20px;
background-color:#0f0;
}
.red{
background-color:#f00;
}