Make child div stretch across width of page

Answer 1

I know this post is old, in case someone stumbles upon it in 2019, this would work try it.

//html
<div id="container">
<div id="help_panel">
<div class="help_panel_extra_if_you_want"> //then if you want to add some height and width if you want, do this.

</div>
</div>
</div>

//css
#container{
left: 0px;
top: 0px;
right: 0px;
z-index: 100;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;    
position: relative;
height:650px;
margin-top:55px;
margin-bottom:-20px;
}

#help_panel {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding-right: 24px;
padding-left: 18px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;

.help_panel_extra_if_you_want{
height:650px;
position: relative;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
align-items: center;
display: flex;
width: 95%;
max-width: 1200px;
}

SHOULD GIVE YOU SOMETHING LIKE THIS

Answer 2

Yes you can, set the position: relative for the container and position: absolute for the help_panel

Answer 3

Just set the width to 100vw like this:

<div id="container" style="width: 100vw">
 <div id="help_panel" style="width: 100%; margin: 0 auto;">
  Content goes here.
 </div> 
</div>

Answer 4

...............In HTML Format

<div id="a">Full Width</div>

...............In CSS Format

#a { background-color: green;width: 100%;height: 80px;border: 1px solid;margin: 0 auto;} 

    body { padding: 0;margin: 0}

Answer 5

you can pull it out of the flow by setting position:absolute on it, but you'll have different display issues to deal with. Or you can explicitly set the width to > 960.

Answer 6

You could take it out of the flow with position:absolute. But the helper_panel will oberlap with other stuff. (I added orders, to see the divs)

<div id="container" style="width: 960px; border:1px solid #f00;">
    Text before<br>
   <div id="help_panel" style="width: 100%; position:absolute; margin: 0 auto; border:1px solid #0f0;">
     Content goes here.
   </div> 
   This is behind the help_penal
</div>