Break element out of container

user_147586 0
Viewed 42820

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.

position css html
8 Answers
user_19602310

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/

user_10866100

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

user_137562620
Related