Is there a 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 its parent. The child DIV needs to be the same width as 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.

Answer 1

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:

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

<div class="parent">
  Pre
  <div class="child">Child</div>
  Post
</div>

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.

Answer 2

Use absolute positioning

.child-div {
    position:absolute;
    left:0;
    right:0;
}

Answer 3

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

Answer 4

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

<div class="grandparent">
    <div class="parent">
        <div class="child">
            <p>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.</p>
        </div>
    </div>
</div>

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 & 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.

Answer 5

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

.parent {
  background-color: aqua;
  height: 50vh;
  margin-left: auto;
  margin-right: auto;
  width: 50vw;
}

.child {
  background-color: pink;
  display: flex;
}

.wide {
  margin-left: calc(-37.5vw + 50%);
  width: 75vw;
}

.full {
  margin-left: calc(-50vw + 50%);
  width: 100vw;
}

<div class="parent">
  <div>
    parent
  </div>
  <div class="child wide">
    75vw
  </div>
  <div class="child full">
    100vw
  </div>
</div>

Demo #2: Using CSS variables

.parent {
  background-color: aqua;
  height: 50vh;
  margin-left: auto;
  margin-right: auto;
  width: 50vw;
}

.child {
  background-color: pink;
  display: flex;
  margin-left: calc(-.5 * var(--child-width) + 50%);
  width: var(--child-width);
}

.wide {
  --child-width: 75vw;
}

.full {
  --child-width: 100vw;
}

<div class="parent">
  <div>
    parent
  </div>
  <div class="child wide">
    75vw
  </div>
  <div class="child full">
    100vw
  </div>
</div>

Answer 6

I used this:

HTML

<div class="container">
 <div class="parent">
  <div class="child">
   <div class="inner-container"></div>
  </div>
 </div>
</div>

CSS

.container {
  overflow-x: hidden;
}

.child {
  position: relative;
  width: 200%;
  left: -50%;
}

.inner-container{
  max-width: 1179px;
  margin:0 auto;
}

Answer 7

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 div with inner content.

https://codepen.io/yuyazz/pen/BaoqBBq

Answer 8

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/

Answer 9

To make child div as wide as the content, try this:

.child{
    position:absolute;
    left:0;
    overflow:visible;
    white-space:nowrap;
}

Answer 10

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/

Answer 11

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

Answer 12

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

Answer 13

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

Answer 14

Then solution will be the following.

HTML

<div class="parent">
    <div class="child"></div>
</div>

CSS

.parent{
        width: 960px;
        margin: auto;
        height: 100vh
    }
    .child{
        position: absolute;
        width: 100vw
    }

Answer 15

.parent {
    margin:0 auto;
    width:700px;
    border:2px solid red;
}
.child {
    position:absolute;
    width:100%;
    border:2px solid blue;
    left:0;
    top:200px;
}