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

the parent element of whole page centered div limited max-width of 960px. other elements on page children of parent div. simplified structure following:

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

while parent div shouldn't expand beyond width of 960px, div called "wide-div" here should fill entire width of screen. contains single image wider 960px, , should set different background color entire width of screen.

i can't take div out of parent div, mess other parts of layout , make whole thing rather awkward.

i found few tricks on how can achieve this, none seemed fit requirements. design responsive, or @ least i'm trying achieve that. tricks found relied on knowing size of involved elements, not fixed in case.

is there way expand inner div full screen width in responsive layout?

you can set width based on vw (viewport width). can use value using calc function, calculate left-margin div. way can position inside flow, still sticking out on left , right side of centered fixed-width div.

support pretty good. vw supported major browsers, including ie9+. same goes calc(). if need support ie8 or opera mini, you're out of luck 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">other content, not behind green can see.</div>  </div>