How can I have a section as wide as the browser window inside a container with padding?

Question

I'm trying to build a web template in which the main content resides in a div called #content. #content is 90% the width of its parent container, #wrapper, and has a max-width of 1200px. But I also want to have the occasional section that spans the entire width of the browser window. (I can't just apply the 90% width rule to each regular section, because sometimes there will be a sidebar that exists outside of #content, and the sidebar and #content need to have the 90% width applied to them as a whole.)

How do I do this? I played around with negative margins, but I couldn't figure it out.

<html>
<head>
    <title></title>
    <meta charset="utf-8" />

    <style type="text/css">
        body {
            background-color: #DDD;
        }

        #content {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            background-color: #FFF;
            padding: 1em;
        }

        .full-width {
            background-color: #333;
            color: #EEE;
            padding: 1em;

            margin: 0 -10%; /* obviously this doesn't work */
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="content">
            <section class="regular">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies.</p>
            </section> <!-- regular -->

            <section class="full-width">
                <p>This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window.</p>
            </section> <!-- regular -->

            <section class="regular">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies.</p>
            </section> <!-- regular -->
        </div> <!-- content -->
    </div> <!-- wrapper -->
</body>

diagram

Can you post the code you're working with in your question please. — j08691, Apr 09 '15 at 14:15
#content resides in a Joomla template. Everything that goes inside of #content resides inside individual article pages. There's no way to put a sibling div alongside #content from within an article. — Kris Hunt, Apr 09 '15 at 14:28
Thanks for that link. The best solution I've found so far comes from there: add the following styles to .full-width: width: 100vw; position: relative; left: calc(-50vw + 50%); box-sizing: border-box; IE9+ compatible. — Kris Hunt, Apr 09 '15 at 15:49

José SAYAGO · Answer 1 · 2015-04-09T15:30:09.037

When you are wrapping content within an element constrained by margin limits, then you must compensate for this space "taken" from children of it.

If your parent div is 90% width of the body, it means all 100% children will take full width of that 90% not 100%, so how to fix this? Those children must be 110% width and take negative margin.

Something like:

.content {
  width: 90%;
  margin: 0 auto;
}
.offmargins {
  width: 110%;
  margin-left: -6%;
  background: #ccc;
  padding: 1%;
}

Here is an example:

jQuery(document).ready(function(){
  jQuery(window).on('resize', adapt);
  adapt();
});
function adapt() {
  jQuery('.full-width').css({
    width: jQuery(window).width(),
    marginLeft: '-6.2%'
  });
}

#content {
  width: 90%;
  margin: 0 auto;
  max-width: 1200px;
}
section {
  width: 90%;
  margin: 0 auto;
}
.full-width {
    background: #ccc;
    padding: .5em 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
        <div id="content">
            <section class="regular">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies.</p>
            </section> <!-- regular -->

            <section class="full-width">
                <p>This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window.</p>
            </section> <!-- regular -->

            <section class="regular">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies.</p>
            </section> <!-- regular -->
        </div> <!-- content -->
    </div> <!-- wrapper -->

Another approach without JS:

#content {
  width: 90%;
  margin: 0 auto;
  max-width: 1200px;
}
section {
  width: 90%;
  margin: 0 auto;
}
.full-width {
    background: #ccc;
    padding: .5em 0;
    position: relative;
    width: 100vw;
    left: calc(-50vw + 50%);
}

<div id="wrapper">
        <div id="content">
            <section class="regular">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies.</p>
            </section> <!-- regular -->

            <section class="full-width">
                <p>This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window.</p>
            </section> <!-- regular -->

            <section class="regular">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies.</p>
            </section> <!-- regular -->
        </div> <!-- content -->
    </div> <!-- wrapper -->

Playing with percentage will end with a different result for different browser size. — Alexandre Lavoie, Apr 09 '15 at 14:31
@AlexandreLavoie and that's exactly what you should do if you want your site RWD compatible. — José SAYAGO, Apr 09 '15 at 14:33
That works pretty well if you don't have a max-width assigned to #content. What if you do? — Kris Hunt, Apr 09 '15 at 14:34
@KrisHunt it should just adapt, try resizing this example: http://codepen.io/anon/pen/LEKZxE where I set max-width to 900px. — José SAYAGO, Apr 09 '15 at 14:39
But the .offmargins div doesn't extend to the window edges if the window is greater than 900px wide. Is it just not possible to have it do that in all cases? — Kris Hunt, Apr 09 '15 at 14:41
@KrisHunt It is quite complicated with CSS only, the issue is we don't know beforehand browsers' width, so we need to get it somewhere, the only way to know this is using JavaScript. I have used jQuery in this example to put something quick but you may want to transform everything into plain JavaScript if you want to. — José SAYAGO, Apr 09 '15 at 15:24
@KrisHunt I have added another example without JavaScript involved, using viewport units which in my local tests seems to adapt pretty well. — José SAYAGO, Apr 09 '15 at 15:31

score 0 · Answer 2 · answered Apr 09 '15 at 16:30

Is there some reason why you can't have two different sized sections? It seems to me that you just need to have two containers - one that is restricted to 90%/1200px and one that isnt:

section {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    background-color: #FFF;
    padding: 1em;
    box-sizing:border-box;
}
section.full-width {
    background-color: #333;
    color: #EEE;
    width: 100%;
    max-width: inherit;
}

See: http://jsfiddle.net/t9wuapb9/
or the following snippet:

html, body {
    background-color: #DDD;
    margin:0;
}
#wrapper, #content {
    width: 100%;
}
section {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    background-color: #FFF;
    padding: 1em;
    box-sizing:border-box;
}
section.full-width {
    background-color: #333;
    color: #EEE;
    width: 100%;
    max-width: inherit;
}

<div id="wrapper">
    <div id="content">
        <section class="regular">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies.</p>
        </section>
        <section class="full-width">
            <p>This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window.</p>
        </section>
        <section>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies.</p>
        </section>
    </div>
</div>

How can I have a section as wide as the browser window inside a container with padding?

2 Answers2