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?

Desiree

by giving your wide div a width in px will give you the result you want. Its just to make it responsive you will have to use javascript to calculate it based on window size. You can also try and use the css calc() function. – Crooks

I agree with @floor. Most wp themes that use wide sections calculate the width with javascript. The position:absolute approaches will probably fail to work on real websites. – Agenesis

Can set child div to width 100vw and parent to overflow visible – Bridgehead

In 2020 the way to achieve this is to use CSS media queries – Holzman

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>

Antilepton

Warning: calc() is really buggy on iPad. – Agenesis

This to me is the best answer. Using position: absolute on wide-div would cause it to cover up something-else. – Ramey

@miro, True, I overlooked that. Safari doesn't support using vw inside calc(), according to CanIUse... – Antilepton

The remarks above only apply to older versions (IOS Safari 7.1), but the versions after that have proper support. – Antilepton

Why in my code, the calc function result is giving me calc(0vw)? this makes my full width container to move to the right and not be centered – Saragossa

@Saragossa This Q&A is two years old, and I can't guess what your code looks like. If you have an issue you can't solve, please make an mcve and ask a new question. – Antilepton

@Gol I get horizontal scrollbars when I use this. How to get rid of them? – Sobriety

@SabaAhang @Antilepton I had the same problem, you can solve adding overflow-x: hidden to the body because sometimes it can take some pixels more. I would update the answer to advice this for future visitors. On the other hand, nice answer! – Ias

@Ias Thanks! I've added it. – Antilepton

how margin-left: calc(-50vw + 50%); works in this particular situation? – Dahabeah

For me, i needed: min(0px,calc(-50vw + 50%)) , as it would displace as the screen gets smaller – Epley

Still bottom scroller is coming. Can any one suggest how to give exact margin-left with calc() – Simpatico

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%;
}

Zeringue

good idea, but breaks if viewport width becomes less than element width (body have min-width + browser window not wide enough) – Incase

Just do your responsive design down to 320px wide and you really shouldn't have to worry about it breaking... but do watch out for the difference in scrollbars... I added a javascript to detect if the page has a visible scroll bar or transparent one. Then added .has-scrollbar .full-width { margin-left: calc((-100vw + 15px) / 2); margin-right: calc((-100vw + 15px) / 2); width: calc(100vw - 15px); } or .has-scrollbar .row-full in this case. – Durarte

If you need to support RTL text (ie Arabic languages), then it's important to specify margin-right:-50vw; and right: 50%; as well. – Fright

Answer 3

You can now do this

.full-width {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

or this

.full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

More details: https://css-tricks.com/full-width-containers-limited-width-parents/

Faena

Answer 4

Typically the responsive element, bootstrap or Foundation, allow you to add a "row" element. You can put the "wide-div" outside an element with "row" and it should expand to take up the full width.

Alternatively, you can use absolute positioning for that element which ignores most inherited settings:

.wide-div {
    position: absolute;
    left: 0;
    right: 0;
}

Cavicorn

till is not inside a parent of position relative – Bridgetbridgetown

Answer 5

I'm a little surprised no one offered the following in the last 4 years. The css position:fixed property pulls the item out and scales it in relation to the window. There are some cases where maybe this doesn't work, but if you're Javascripting a modal box or something, this works fine.

.wide-div{
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%; // in case you need to cover the height as well
    background-color:rgba(0,0,0,.8); //just so you can see the div is on top of your content
    z-index:1; // you may need to adjust the index of your other elements as well
}

Lacewing

The main issue with this method is that, being fixed, the div won't scroll with the rest of the page contents. – Fright

You're absolutely right, but if that was a requirement of the original poster then they didn't mention it. – Lacewing

Answer 6

You can use vw. Demo http://jsfiddle.net/fsLhm6pk/

.parent {
  width: 200px;
  height: 200px;
  background: red;
}

.child {
  width: 100vw;
  height: 50px;
  background: yellow;
}

<div class='parent'>
  <div class='child'></div>
</div>

You are right, this won't work with centered div. Try this instead:

EDIT http://jsfiddle.net/fsLhm6pk/1/

.parent {
  width: 200px;
  height: 200px;
  background: red;
  margin: 0 auto;
}

.child {
  width: 100%;
  left: 0;
  right: 0;
  position: absolute;
  height: 50px;
  background: yellow;
}

<div class='parent'>
  <div class='child'></div>
</div>

Berhley

My parent div is centered, this expands the child div to the right, but not to the left. – Desiree

It also isn't supported by all browsers.. if you care about that. – Crooks

This method only expands out to the last position:relative; parent div, not to the width of the browser window. – Fright

Answer 7

My 50cent here..

Although I find other people's answers correct too, i think it needs to be mentioned an old css trick to archive this

.wide-div {    
   padding: 0 9999%;
   margin: 0 -9999%;
}

Again in this case too, if a horizontal scrollbar appears you can fix this using

body {overflow-x: hidden;} 

Depending the case, the difference in this code is that the inner content here stays aligned with the parent width

body {overflow-x: hidden;} 

div {
  min-height: 40px;
  box-sizing: border-box;
}
#parent {
  width: 400px;
  border: 1px solid black;
  margin: 0 auto;
}

#something {
  border: 2px solid red;
}
#something-else {
  border: 2px solid red;
}

#wide-div {
  padding: 0 9999%;
    margin: 0 -9999%;
  border: 2px solid green;
}

<div id="parent">
  <div id="something">Red</div>
  <div id="wide-div">Wide</div>
  <div id="something-else">Other content</div>
</div>

Bant

Any idea what styles would prevent this from working? I use a similar strategy and it works for 2 out of 3 parents i.e. there are 3 ancestors of .wide-div and it's wider than 2 of them but it's restricted by the outermost one, regardless of what I try. – Curvature

Can you put it in a codepen or something? @UcheOzoemena – Bant

Answer 8

This should do it.

#wide-div{
    position: absolute;
    width: 100vh;
    min-width: 100vw;
    max-width: 100vw;
    background: white;
    left: 0;
    margin-left: 0;
    overflow-x: hidden;
    z-index: 99999;
}

Countable