CSS - full width element within narrow parent? - css

Question

I have a blog post that is 960 pixels wide.
I want parts of this blogpost to cover 100% of the viewport (from left: 0 to right: 0). It's fairly easy to do with absolute positioning but using this approach it's impossible to clear these 100%-wide elements.
HTML:
<div class="wrapper">
<h1>A header</h1>
<p>Some content.</p>
<div class="out">
<blockquote>Some blockquote.<br/> Another line.<br/>And another.</blockquote>
</div>
<p>Clears don't work here and this content is invisible :( </p>
<p>And this sucks :( </p>
<div class="out">
<blockquote>And different blockquote.<br/> Another line.<br/></blockquote>
</div>
<p>Also this is behind blockquote as well.</p>
</div>
CSS:
body {
position: relative;
}
.wrapper {
margin: 0 auto;
padding: 15px;
background: #eee;
width: 400px;
height: 1000px;
}
.out {
position: absolute;
right: 0;
left: 0;
padding: 15px;
background: #aaa;
width: 100%:
}
blockquote {
margin: 0 auto;
width: 400px;
}
Here's a demo:
http://jsfiddle.net/2rC2S/1/
Note: all blockquotes have different height so I can't set it for them. I don't want to use JavaScript (because it's fairly easy to get elements height, set this and boom, but who renders content with JS?!).

Answer 1

You may do this by using before and after pseudo selectors as follows
.out:before, .out:after {
content:"";
background: black;
position: absolute;
top: 0;
bottom: 0;
width: 9999px;
}
.out:before {
right: 100%;
}
.out:after {
left: 100%;
}
http://jsfiddle.net/kM3Gf/
you may find original article here http://css-tricks.com/examples/FullBrowserWidthBars/
still I am not sure about browser compatibility!

Answer 2

Maybe you can avoid setting the width for the wrapper and instead set it for each of the content elements?
An absolutely positioned element won't take up space in the document and thus won't push any content down.
See this DEMO
.wrapper h1, .wrapper p {
margin: 0 auto;
padding: 15px;
background: #eee;
width: 400px;
}