Is there are way to make a child DIV s width wider than the parent DIV using CSS

Question

Is there a way to have a child DIV within a parent container DIV that is wider than it s parent  The child DIV needs to be the same width of the browser viewport   See example below    The child DIV must stay as a child of the parent div  I know I can set arbitrary negative margins on the child div to make it wider but I can t work out how to essentially make it 100  width of the browser   I know I can do this    child-div      margin-left  -100px      margin-right  -100px      But I need the child to be the same width as the browser which is dynamic   Update  Thanks for your answers  it seems the closest answer so far is to make the child DIV position  absolute  and set the left and right properties to 0    The next problem I have is that the parent has position  relative  which means that left and right properties are still relative to the parent div and not the browser  see example here  jsfiddle net v2Tja 2  I can t remove the position relative from the parent without screwing everything else up

User · Answer

Adding to Nils Kaspersson s solution  I am resolving for the width of the vertical scrollbar as well  I am using 16px as an example  which is subtracted from the view-port width  This will avoid the horizontal scrollbar from appearing   width  calc 100vw - 16px   left  calc -1      100vw - 16px  - 100     2

User · Answer

Assuming the parent has a fixed width  e g  page   width  1000px    and is centered  page   margin  auto     you want the child to fit the width of browser viewport you could simply do    page       margin  auto      width  1000px      fullwidth       margin-left  calc 500px - 50vw      500px is half of the parent s 1000px        width  100vw

User · Answer

Flexbox can be used to make a child wider than its parent with three lines of CSS   Only the child   s display  margin-left and width need to be set  margin-left depends on the child   s width  The formula is   margin-left  calc - 5   var --child-width    50      CSS variables can be used to avoid manually calculating the left margin   Demo  1  Manual calculation   x000D   x000D   parent   x000D    background-color  aqua  x000D    height  50vh  x000D    margin-left  auto  x000D    margin-right  auto  x000D    width  50vw  x000D    x000D   x000D   child   x000D    background-color  pink  x000D    display  flex  x000D    x000D   x000D   wide   x000D    margin-left  calc -37 5vw   50    x000D    width  75vw  x000D    x000D   x000D   full   x000D    margin-left  calc -50vw   50    x000D    width  100vw  x000D    x000D   lt div class  parent  gt  x000D     lt div gt  x000D      parent x000D     lt  div gt  x000D     lt div class  child wide  gt  x000D      75vw x000D     lt  div gt  x000D     lt div class  child full  gt  x000D      100vw x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Demo  2  Using CSS variables   x000D   x000D   parent   x000D    background-color  aqua  x000D    height  50vh  x000D    margin-left  auto  x000D    margin-right  auto  x000D    width  50vw  x000D    x000D   x000D   child   x000D    background-color  pink  x000D    display  flex  x000D    margin-left  calc - 5   var --child-width    50    x000D    width  var --child-width   x000D    x000D   x000D   wide   x000D    --child-width  75vw  x000D    x000D   x000D   full   x000D    --child-width  100vw  x000D    x000D   lt div class  parent  gt  x000D     lt div gt  x000D      parent x000D     lt  div gt  x000D     lt div class  child wide  gt  x000D      75vw x000D     lt  div gt  x000D     lt div class  child full  gt  x000D      100vw x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Based on your suggestion original suggestion  setting negative margins   I have tried and come up with a similar method using percentage units for dynamic browser width   HTML   lt div class  grandparent  gt       lt div class  parent  gt           lt div class  child  gt               lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Dolore neque repellat ipsum natus magni soluta explicabo architecto  molestias laboriosam rerum  Tempore eos labore temporibus alias necessitatibus illum enim  est harum perspiciatis  sit  totam earum corrupti placeat architecto aut minus dignissimos mollitia asperiores sint ea  Libero hic laudantium  ipsam nostrum earum distinctio  Cum expedita  ratione  accusamus dicta similique distinctio est dolore assumenda soluta dolorem quisquam ex possimus aliquid provident quo  Enim tempora quo cupiditate eveniet aperiam  lt  p gt           lt  div gt       lt  div gt   lt  div gt    CSS    child-div     margin  0 -100      padding  0 -100       parent       width  60       background-color  red      margin  0 auto      padding  50px      position relative      grandparent           overflow-x hidden          background-color  blue          width  100           position relative          The negative margins will let the content flow out of the Parent DIV  Therefore I set the padding  0 100   to push the content back to the original boundaries of the Chlid DIV   The negative margins will also make the  child-div s total width expands out of the browser s viewport  resulting in a horizontal scroll  Hence we need to clip the extruding width by applying an overflow-x  hidden to a Grandparent DIV  which is the parent of the Parent Div    Here is the JSfiddle  I haved tried Nils Kaspersson s left  calc -50vw   50    it worked perfectly fine in Chrome  amp  FF  not sure about IE yet  until I found out Safari browsers doesn t do it properly  Hope they fixed this soon as I actually like this simple method   This also may resolve your issue where the Parent DIV element has to be position relative  The 2 drawbacks of this workaround method is    Require extra markup  i e a grandparent element  just like the good ol  table vertical align method isn t it     The left and right border of the Child DIV will never show  simply because they are outside of the browser s viewport    Please let me know if there s any issue you find with this method     Hope it helps

User · Answer

Then solution will be the following   HTML   lt div class  parent  gt       lt div class  child  gt  lt  div gt   lt  div gt    CSS   parent          width  960px          margin  auto          height  100vh            child          position  absolute          width  100vw

User · Answer

I tried some of your solutions  This one     margin  0px -100   padding  0 100     is by far the best  since we don t need extra css for smaller screen  I made a codePen to show the results   I used a parent div with a background image  and a child divon div with inner content   https   codepen io yuyazz pen BaoqBBq

User · Answer

Use absolute positioning   child-div       position absolute      left 0      right 0

User · Answer

I had a similar issue  The content of the child element was supposed to stay in the parent element while the background had to extend the full viewport width   I resolved this issue by making the child element position  relative and adding a pseudo element   before  to it with position  absolute  top  0  bottom  0  width  4000px  left  -1000px   The pseudo element stays behind the actual child as a pseudo background element  This works in all browsers  even IE8  and Safari 6  - don t have the possibility to test older versions    Small example fiddle  http   jsfiddle net vccv39j9

User · Answer

parent       margin 0 auto      width 700px      border 2px solid red     child       position absolute      width 100       border 2px solid blue      left 0      top 200px

User · Answer

I ve searched far and wide for a solution to this problem for a long time  Ideally we want to have the child greater than the parent  but without knowing the constraints of the parent in advance   And I finally found a brilliant generic answer here  Copying it verbatim      The idea here is  push the container to the exact middle of the   browser window with left  50    then pull it back to the left edge   with negative -50vw margin     child-div     width  100vw    position  relative    left  50     right  50     margin-left  -50vw    margin-right  -50vw

User · Answer

you can try position  absolute  and give width and height   top   y axis from the top   and left   x-axis

User · Answer

To make child div as wide as the content  try this    child      position absolute      left 0      overflow visible      white-space nowrap

User · Answer

I know this is old but for anyone coming to this for an answer you would do it like so   Overflow hidden on a element containing the parent element  such as the body    Give your child element a width much wider than your page  and position it absolute left by -100    Heres an example   body     overflow hidden      parent    width  960px    background-color  red    margin  0 auto    position  relative          child     height  200px    position  absolute    left  -100     width 9999999px      Also heres a JS Fiddle  http   jsfiddle net v2Tja 288

User · Answer

I used this   HTML   lt div class  container  gt    lt div class  parent  gt     lt div class  child  gt      lt div class  inner-container  gt  lt  div gt     lt  div gt    lt  div gt   lt  div gt    CSS   container     overflow-x  hidden      child     position  relative    width  200     left  -50       inner-container    max-width  1179px    margin 0 auto

User · Answer

Here s a generic solution that keeps the child element in the document flow   child     width  100vw    position  relative    left  calc -50vw   50       We set the width of the child element to fill the entire viewport width  then we make it meet the edge of the screen by moving it to the left by a distance of half the viewport  minus 50  of the parent element s width  Demo   x000D   x000D        box-sizing  border-box     body     margin  0    overflow-x  hidden      parent     max-width  400px    margin  0 auto    padding  1rem    position  relative    background-color  darkgrey      child     width  100vw    position  relative    left  calc -50vw   50       height  100px    border  3px solid red    background-color  lightgrey    x000D   lt div class  parent  gt    Pre    lt div class  child  gt Child lt  div gt    Post  lt  div gt  x000D   x000D   x000D   Browser support for vw and for calc   can generally be seen as IE9 and newer  Note  This assumes the box model is set to border-box  Without border-box  you would also have to subtract paddings and borders  making this solution a mess  Note  It is encouraged to hide horizontal overflow of your scrolling container  as certain browsers may choose to display a horizontal scrollbar despite there being no overflow

[css] Is there are way to make a child DIV's width wider than the parent DIV using CSS?

Examples related to css

Examples related to html