Something that I do often when coding a layout is set a div classed “container” that is the max-width of the layout. I use max-width so that it’s responsive and use auto left and right margins to center it on the page. Sometimes a design calls for a section to be as wide as the viewport so that it can have a new background color or image. A lot of times I wind up just breaking those sections up, each with their own container divs like so:

<section class="section-with-color-bg">
    <div class="container">Some content</div>
</section>
<section class="section-with-image-bg">
    <div class="container">Some content</div>
</section>

This is one way to do it, but what if you just want to have one container div to rule them all? Here is our goal:

<div class="container">
    <section class="section-with-color-bg">Some content</section>
    <section class="section-with-image-bg">Some content</section>
</div>

How can we pull those sections out with new backgrounds while keeping their content in the confines of the container? The answer is negative margins.

First, we’ll need to wrap the entire page in a div that is the full width of the viewport and make it overflow:hidden. This will contain everything on the page such as the primary header, nav, footer, etc. (This is also useful for making off canvas menus).

<div class="wrap">
    <div class="container">
        <section class="section-with-color-bg">Some content</section>
        <section class="section-with-image-bg">Some content</section>
    </div>
</div>

Now we can use some CSS to pull those sections out of the container:

.container {
    max-width:800px;
    padding:0 40px;
}

section {
    margin:0 -9999px;
    padding:0 9999px;
}

With the negative margins that high, it will guarantee that the section is pulled out of the container no matter how wide the viewport gets. Then we reset the padding to bring the content back in. If you body is gray, container is white, and the sections have a background color or image other than grey or white, you’ll see them go full width, while the content remains centered in the container div’s width and padding.

What about BFB’s(big freaking backgrounds)?

This method works great on image backgrounds that are basic repeats or have a set size, but often these wide sections have backgrounds where we want the image to cover the section. That’s where this method breaks. If you set the section’s background-size to cover, it will be the container’s width plus 1,9998px wide. That’s really big, and the image will be really zoomed in. Don’t worry, we can fix that.

There are two measurements that have gained support in all major browsers: vh and vw or viewport height and viewport width, respectively. See, the trouble with pulling out a section is that we don’t know exactly how far to pull it because we don’t know how wide the viewport is. That is why we set such a high margin in our first method. With these measurements, though, we do know how wide it is; it’s 100vw. Let’s revisit that CSS:

.container {
    max-width:800px;
    padding:0 40px;
    position:relative;
}

.section-with-color-bg {
    margin:0 -9999px;
    padding:0 9999px;
}

.section-with-image-bg {
    width:calc(100vw);
    position:relative;
    left:50%;
    margin-left:-50vw;
    padding-left:calc(50vw - 50%);
    padding-right:calc(50vw - 50%);
}

Now we can set a background image size to cover, and know that it will just fill the browser’s width exactly. To pull it back out, we’ll give it a relative position, bring it to the center of the container with a left at 50%, then pull it it back out at half the size of the viewport. The last thing is to make the content still stay within the container’s width and padding, so we’ll calculate the left and right padding to be 50% of the viewport minus 50% of the container. Ta da!

This might not always be necessary, but I enjoyed figuring out the math and technique to do it. To see it in action, check out the demonstration below. It has three wide sections: one with just a background color, one using the same method, but with a background image (notice how zoomed in that cover image is), and one with the 100vw method. To see it pull out wider than the container of my content here, visit the pen in a new tab: http://codepen.io/tammyhart/pen/adKXxg

One thought on "Pulling Sections Outside of a Centered Container"

  1. amit says:

    Thnaks for this article. nice work

Leave a Reply

Your email address will not be published. Required fields are marked *