How to Extend Wrapped Elements to the Full Browser Width Using CSS? - html

Question

I’m working on a template which requires some background images of elements (h2, h3, etc.) to extend beyond the (centered) page width to fill the browser window.
I know a way to do that. I’ve seen this solution explained by Craig Buckler here :
http://www.sitepoint.com/css-extend-full-width-bars/
You can see a fiddle here :
http://jsfiddle.net/Vinyl/V8ps3/
Basically, we add a large amount of padding then move the element back to its original location
I think it’s a good solution but do you know another solution to do that ?
html :
<div id="main">
<div>lorem ipsum</div>
<div id="content">content which extend beyond the (centered) page width to fill the browser window</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nunc erat, at ornare nisl sollicitudin eget. Vestibulum aliquam massa sit amet fringilla ullamcorper. Curabitur libero arcu, suscipit eu convallis eget, sodales id ante. Vestibulum gravida massa vitae risus molestie egestas. Nullam mi elit, tempus nec eleifend non, vestibulum ac magna. Integer tortor diam, dapibus eu faucibus nec, ornare in ipsum.</div>
</div>
css :
body {
margin:0;
overflow-x: hidden;
background-color: #333333;
}
#main {
width:250px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
}
#content {
background-color: #999999;
padding: 20px;
width: 100%;
margin: 0 auto;
margin-right: -3000px;
padding-right: 3000px;
margin-left: -3000px;
padding-left: 3000px;
}

Answer 1

DEMO ..
This is another solution.. maybe simpler, it uses :before for the elements (h2, h3, etc.)
CSS
#content {
padding: 20px;
width: 100%;
margin: 0 auto;
position: relative;
z-index: 1;
}
#content:before {
background: #999999;
content: "";
width: 1000%;
height: 100%;
position: absolute;
top: 0;
left: -500%;
z-index: -1;
}
Hope this will help you ..