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

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

---

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

---

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/

---

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

---

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
}

---

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

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

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

---

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

---