How can I expand a child div to 100% screen width if the container div is smaller?

Question

The parent element of the whole page is a centered div limited to a max-width of 960px. All other elements on the page are children of that parent div. The simplified structure is the following:

<div id="parent">   <div id="something"></div>   <div id="wide-div"></div>   <div id="something-else"></div> </div> 

While the parent div shouldn't expand beyond a width of 960px, the div I called "wide-div" here should fill the entire width of the screen. It contains a single image that is wider than the 960px, and it should set a different background color for the entire width of the screen.

I can't easily take that div out of the parent div, it would mess up other parts of my layout and it would make the whole thing rather awkward.

I found a few tricks on how you can achieve this, but none seemed to fit my requirements. My design is responsive, or at least I'm trying to achieve that. The tricks I found relied on knowing the size of the involved elements, which is not fixed in my case.

Is there a way to expand the inner div to the full screen width in a responsive layout?

Answer 1

You can set the width based on the vw (viewport width). You can use that value too using the calc function, to calculate a left-margin for the div. This way you can position it inside the flow, but still sticking out on the left and right side of the centered fixed-width div.

Support is pretty good. vw is supported by all major browsers, including IE9+. The same goes for calc(). If you need to support IE8 or Opera Mini, you're out of luck with this method.

-edit-

As mentioned in the comments, when the content of the page is higher than the screen, this will result in a horizontal scrollbar. You can suppress that scrollbar using body {overflow-x: hidden;}. It would be nice though to solve it in a different way, but a solution using left and rightlike presented in Width:100% without scrollbars doesn't work in this situation.

-edit 2021-

Another work-around for the scrollbars, which may be acceptable or not depending on your situation:
By making the green div a little bit smaller, say 20px, you can keep a bit of space for the scrollbar. Half that reserved width can be added to the margin, to keep the wide div centered:

#wide-div {   width: calc(100vw - 20px);   margin-left: calc(-50vw + 50% + 10px); 

div {   min-height: 40px;   box-sizing: border-box; } #container {   position: relative; } #parent {   width: 400px;   border: 1px solid black;   margin: 0 auto; }  #something {   border: 2px solid red; }  #wide-div {   width: calc(100vw - 20px);   margin-left: calc(-50vw + 50% + 10px);   border: 2px solid green; }

<div id="container"> <div id="parent">   <div id="something">Red</div>   <div id="wide-div">Green   <br>Green <br>Green <br>Green <br>Green <br>Green <br>Green <br>Green </div>   <div id="something-else">Other content, which is not behind Green as you can see.</div> </div> </div>

Answer 2

After much research, I found this solution: Creating full width (100% ) container inside fixed width container. I think that it is the best solution because it does not depend on any external factor, only the div that you want to expand.

<div class="container" style="width: 750px; margin: 0 auto;">    <div class="row-full">      --- Full width container ---    </div>    </div>  .row-full{      width: 100vw;      position: relative;      margin-left: -50vw;      left: 50%; }