Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

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

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

Problem

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 :

lorem ipsum
content which extend beyond the (centered) page width to fill the browser window
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.

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;
}
Problem courtesy of: Sébastien Gicquel

Solution

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

Solution courtesy of: MujtabaFR

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

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

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×