33

I have all my content wrapped in a container element with a fixed width.

But I have a <div> that I want to "break out" of that container to span the full width of the page.

http://dabblet.com/gist/3207168

enter image description here

As you can see in that example, I've got the <div> to break out, but since it's positioned absolutely, it doesn't affect the flow of the page...which is what I'd like it to do.

I want it to act like it's in the flow of the page, but expand the full width of the window.

9 Answers 9

47

Another idea, which in modern browsers does stretch the .breakout only to the width of the browser window:

body, html {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

div {
  padding:0.5em;
}

.container {
  width:300px;
  background-color:rgba(255,255,0,0.5);
  margin:auto;
}

.breakout {
  margin:1em -100%; /* old browsers fallback */
  margin:1em calc(50% - 50vw);
  background-color:rgba(255,0,255,0.5)
}
<div class="container">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

  <div class="breakout">
    Break out of container
  </div>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>

Edit: The one and only Chris Coyier explains Full Width Containers in Limited Width Parents, which is somewhat similiar.

4
  • 2
    This is so elegant I don't understand why this is not an accepted answer. The support goes all the way down to IE9. Detailed explanation: codepen.io/tigt/post/… Aug 1, 2016 at 0:28
  • 2
    This is actually better then the accepted answer. Using margin: 0 -100%; will stretch the breakout div beyond the width of the viewport (-50% would be better, but still makes the breakout div larger than the viewport width). Using calc(50% - 50vw) calculates the exact width and keeps the div within the bounds of the viewport. The effect becomes clear when you use a (for example) background image on the breakout div (or just check the width in 'computed' tab in devtools). It gets too large with the first method.
    – publicJorn
    Oct 26, 2016 at 8:50
  • 1
    This is great. But it needs a 'max-width: 99vw' as some browser include the scroll bar. It will then almost stretch to the sides. See the link by @AlexeiDanchenkov for details. Dec 2, 2016 at 17:20
  • Thanks, works great! To fix the scrollbar issue I put an overflow-x: hidden; on a parent element. .site-content { overflow-x: hidden; } Aug 28, 2017 at 23:42
31

Maybe http://jsfiddle.net/sYv9g/1/?

.wrapper {
    width:300px;
    margin:0 auto;
    background:yellow;
}
.break {
    text-align:center;
    font-weight:bold;
    background:rgba(255,0,0, 0.5);
    margin-left:-100%;
    margin-right:-100%;
}
<div class="wrapper">
    <h1>Ipsum Dapibus Pellentesque Pharetra</h1>
    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis.</p>
    <div class="break">This should be full width</div>
    <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
    <div class="break">This should be full width</div>
    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Donec ullamcorper nulla non metus auctor fringilla.</p>
    <p>Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit tempus porttitor.</p>
</div>

10
  • 2
    Don't forget to add the actual code. JSFiddle has its downtimes, and it's frustrating for you and the OP to wait for an external site.
    – Zeta
    Jul 30, 2012 at 14:31
  • 2
    The problem with this is that it uses percentages as opposed to pixels, thus if you ever try to use borders or add new elements into that div you will have styling issues without calculating new percentages for the margins Jul 30, 2012 at 14:33
  • 14
    The main problem with this method, is that it doesn't really make the .break div full width. It's just a wild guess. The negative margins make the div extend its own width to both sides. If the original width is less than 1/3 of the viewport, the result will not be full width. If the original width is more than 1/3, the margins will extend too far, resulting in a horizontal scrollbar. Jan 27, 2013 at 22:15
  • 3
    You can avoid the horizontal scrollbar with: body { overflow-x: hidden; }
    – Mark
    Oct 31, 2013 at 22:07
  • 2
    You may be able to remove the horizontal scroll bar, but on mobile devices there is still a good chance that this will mess up your viewport width.
    – fboes
    Oct 26, 2016 at 8:55
4

You can't actually make it break out of the wrapping div, but you can simulate this same effect by having the wrapping div be the full width of the page, and by wrapping the other elements on that page that are not supposed to be in your "break out" div inside a div that has a yellow background and 300px width.

3
  • Yeah, trying to avoid wrapping things like <p> in a container div to pull that off.
    – Shpigford
    Jul 30, 2012 at 14:27
  • unfortunately, you are going to be forced to do that. The closest thing to what you're looking for would be to have it "removed" from the wrapper but still in the normal flow by making the position relative, as opposed absolute. The problem is that the normal flow doesn't just mean that the original space required for the element is maintained - it also means that the normal inheritance is maintained. In other words, you will still have to deal with it's dimensions (in terms of relative to the page width) being constrained by the wrapper Jul 30, 2012 at 14:30
  • I saw his response, but the problem is adaptability. If you cannot adapt the solution for use in other situations then it's just putting a band-aid on a gushing wound. Although I admire the cleverness of the solution, it's a temporary fix that will likely cause issues down the line because you're extending your div's dimensions well beyond the visible area of the window Jul 30, 2012 at 14:35
3

I like this simple technique (thanks to Bust elements out of their containers with one line of CSS):

margin: 0 calc(50% - 50vw)
1

You could use negative margins to achieve this.

.wrapper {
    width:300px;
    margin:0 auto;
}
.break {
    width: 600px;
    margin-left:-150px;
}

The only problem is that you would need to specify the width of both elements.

EDIT: voodoo417's solution would be better...

1

Building on top of voodoo417's solution with just adding a second wrapper and some slight modifications this can be done properly:

    .outer-wrapper {
        overflow:hidden;
        min-width:300px;
    }
    .wrapper {
        width:300px;
        margin:0 auto;
        background:yellow;
    }
    .break {
        text-align:center;
        font-weight:bold;
        background:rgba(255,0,0, 0.5);
        margin-left:-9999px;
        margin-right:-9999px;
    }
    <div class="outer-wrapper">
    <div class="wrapper">
        <h1>Ipsum Dapibus Pellentesque Pharetra</h1>
        <div class="break">This should be full width</div>
    </div>
    </div>

Here is the adapted jsfiddle:

http://jsfiddle.net/v53vv78d/2/

0

A better version taking the width of the container into account.

.wrapper {
    width:300px;
    margin:0 auto;
    background:yellow;
}
.break {
    text-align:center;
    font-weight:bold;
    background:rgba(255,0,0, 0.5);
    margin-left: calc((-100vw + 300px)*.5);
    margin-right: calc((-100vw + 300px)*.5);
}

https://jsfiddle.net/Lxnmr01h/

2
  • I've tested this in safari, chrome and firefox and do not see a horizontal scroll.
    – trackleft
    Jan 19, 2021 at 23:43
  • If someone has scroll bars always on, this might cause a horizontal scrollbar to appear because vw does not take the scrollbar into account when determining the width apparently.
    – trackleft
    Jan 19, 2021 at 23:48
0

An overflow: hidden on the parent element fixed the problem for me !

0

Break a Child Block out of a Parent to 100% Width

Here is another non-JavaScript way to break out of a container and fill 100% of the width of your viewport using plain CSS. This one will look perfect every time with no script required!

    html body {position:relative;}

    #parent1 {
        min-width: 100vw;
        position:absolute;
        top:0;
        right:-10px;/* match this to padding below */
        padding: 0 0 0 10px;/* match this to right positioning above*/
        margin:0;
        background:transparent;
        height:auto;
        z-index:100;
    }
    #child1 {
        position: relative;
        width: 100%;
        height: auto;
        margin:0 auto;
        z-index:101;
        padding:1em;
        margin:0;
        background: green;
        color:#fff;
    }

    <div id="parent1">
        <div id="child1">text text text text text </div>
    </div>

How it Works

First give your body element a relative position. This will not affect the body element functioning in any way, but allows your embedded child div with absolute positioning the ability to use the body as a point of reference. Assigning the absolute positioning on the parent relative to the body means you can break out of the content flow and fill the width starting from the body.

min-width:100vw is the secret sauce of this solution! It stretches your div container to fill the full width, which unfortunately includes the scrollbar. Because the min-width: 100vw is constantly recalculated as the browser or user-agent viewport grows or shrinks along width, plus includes any vertical scroll bar, the parent div width may bleed slightly off page as users change browser window sizes. Because of this problem in viewport recalculations in modern browsers, the viewable browser area will stretch a little extra under any vertical scrollbar that might appear and create an x-axis scrollbar, in addition. The CSS removes the x-axis scollbar by aligning the parent container to a negative right position value which removes the x-axis scrollbar and forces the extra viewport to the right edge. Change negative value this to whatever you may need to align your bock element to the right screen area. If your body or parents don't have right margins or padding, you may set this to right:0.

The final width will likely scroll off the left side of the page after right positioning because of y-axis vertical scrollbars which are included in viewport width calculations. This is ok because we add padding-left to this parent block element equal to any right negative value, which pushes any child content from the left of the screen edge back into the viewport for the child div content so it doesn't flow off the page. Note that any right position value you use should match the left padding value for this to work. Also make sure your parent div has a transparent background as it uses as a holder only.The child content text should now fit perfectly into the web page, filling 100% width! :) peace

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.