Keeping div's width same as wrapper, but making the background full width - css

Question

The image shows what I'm trying to accomplish. All 3 divs are contained in a wrapper that's 800px. But the second div's background extends the full width of the body.

Answer 1

I have a solution nearly identitical to the one by patkay.
My HTML:
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="content">Content 1...</div>
</div>
<div class="inner-wrapper noted">
<div class="content">Content 2...</div>
</div>
<div class="inner-wrapper">
<div class="content">Content 3...</div>
</div>
</div>
And my CSS:
.outer-wrapper {
width: 100%;
outline: 1px dotted blue;
}
.inner-wrapper {
width: inherit;
}
.inner-wrapper.noted {
background-color: gray;
}
.content {
width: 600px;
margin: 10px auto;
outline: 1px dotted red;
}
Fiddle reference: http://jsfiddle.net/audetwebdesign/Nbu7G/
Essentially, I use the .outer-wrapper to set control the overall width, and then inherit the width to the .inner-wrapper which is used to set the background color through an extra class call .noted.
The inner-most container .content has the fixed width (for example, 600px).
The extra markup could be clean-up semantically using HTML5 tags, but this pattern gives you a lot of hooks to use background images and so on.

Answer 2

One way you can do this is to have three separate div's that are all aligned centrally on the inside, have full width backgrounds and are stacked on top of each other.
<div class="top">
<div class="wrap">
<p>Some content</p>
</div>
</div>
<div class="mid">
<div class="wrap">
<p>Some content</p>
</div>
</div>
<div class="bottom">
<div class="wrap">
<p>Some content</p>
</div>
</div>
The CSS is:
body {
text-align: center;
}
.top, .bottom {
background: #aaa;
width: 100%;
}
.mid {
background: #616161;
width: 100%;
}
.wrap {
width: 800px;
margin: 0 auto;
padding: 5px;
}