Make child div stretch across width of page

Question

Suppose I have the following HTML code    lt div id  container  style  width  960px  gt      lt div id  help panel  style  width  100   margin  0 auto   gt       Content goes here      lt  div gt    lt  div gt    If I want the help panel div to stretch across the width of the page broswer  even if the width of the page browser is wider than 960px  which is the width set for the container div   is it possible to do it with the above structure   I want to get the help panel div to expand beyond the width limits set in the container div if the page is wider than 960px     I am curious if this can be accomplished with the above structure   Or will I have to put the help panel div outside of the container div to make it work     Thanks

User · Answer

With current browsers  this question is dating a bit now   you can use the much simpler vw  viewport width  unit    help panel     margin-left  calc 50  - 50vw     width  100vw       usage data  http   caniuse com  feat viewport-units   From my tests  this should not break your flow while being easy to use

User · Answer

Since position  absolute  and viewport width were no options in my special case  there is another quick solution to solve the problem  The only condition is  that overflow in x-direction is not necessary for your website   You can define negative margins for your element    help panel       margin-left  -9999px      margin-right  -9999px      But since we get overflow doing this  we have to avoid overflow in x-direction globally e g  for body   body       overflow-x  hidden      You can set padding to choose the size of your content   Note that this solution does not bring 100  width for content  but it is helpful in cases where you need e g  a background color which has full width with a content still depending on container

User · Answer

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

User · Answer

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    lt div id  container  style  width  960px  border 1px solid  f00   gt      Text before lt br gt      lt div id  help panel  style  width  100   position absolute  margin  0 auto  border 1px solid  0f0   gt       Content goes here      lt  div gt      This is behind the help penal  lt  div gt

User · Answer

You can do   margin-left  -50   margin-right  -50

User · Answer

Just set the width to 100vw like this     lt div id  container  style  width  100vw  gt    lt div id  help panel  style  width  100   margin  0 auto   gt    Content goes here    lt  div gt    lt  div gt

User · Answer

Yes it can be done  You need to use  position absolute  left 0  right 0    Check working example at http   jsfiddle net bJbgJ 3

User · Answer

I know this post is old  in case someone stumbles upon it in 2019  this would work try it     html  lt div id  container  gt   lt div id  help panel  gt   lt div class  help panel extra if you want  gt    then if you want to add some height and width if you want  do this    lt  div gt   lt  div gt   lt  div gt     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

User · Answer

You can use 100vw  viewport width   100vw means 100  of the viewport  vw is supported by all major browsers  including IE9     lt div id  container  style  width  960px  gt      lt div id  help panel  style  width  100vw  margin  0 auto   gt       Content goes here      lt  div gt    lt  div gt

User · Answer

You could do it with jQuery         help panel   width   window  width       Otherwise  as far as css goes  I m fairly sure you would have to sit the help panel div on the outside of container using position absolute styling  http   css-tricks com forums discussion 2318 give-child-div-width 3A100-of-page-width-inside-parent  p1

User · Answer

In HTML Format   lt div id  a  gt Full Width lt  div gt                   In CSS Format    a   background-color  green width  100  height  80px border  1px solid margin  0 auto         body   padding  0 margin  0

User · Answer

Yes you can  set the position  relative for the container and position  absolute for the help panel

[html] Make child div stretch across width of page

Examples related to html

Examples related to css