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.

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

#something {
  border: 2px solid red;
}

#wide-div {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  border: 2px solid green;
}

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

share|edit|flag

edited Jul 13 '15 at 19:33 Pangloss 23.1k82453

answered Jul 13 '15 at 19:15 GolezTrol 81.2k477122

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

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

The idea is to set the max-width only the 1st and 3d <div> instead of parent container.

body {
    margin: 0;
    text-align: center;
}
#something, #something-else {
    max-width: 960px;
    margin: 0 auto;
    background: yellow;
}
#wide-div {
    background: aqua;
}
#wide-div img {
    max-width: 100%;
    vertical-align: middle;
}

<div id="parent">
    <div id="something">*</div>
    <div id="wide-div"><img src="//dummyimage.com/1000x100" /></div>
    <div id="something-else">*</div>
</div>