W3docs
en
Log in

How to Make a Child Div Element Wider than the Parent Div

On this page, we’ll demonstrate how you can make a child <div> element wider than the parent <div> element. See what CSS properties you need and try examples.

Tags

Solutions with CSS

Making a child <div> element wider than the parent <div> can be done with some CSS properties.

In the example below, we set the position of the parent <div> to “static”. Because the parent is not positioned, the absolutely positioned child uses the viewport as its containing block. This allows the child to stretch across the full viewport width, making it wider than the parent. We also specify the width, background-color, and margin for the parent container.

In the parent container, we also have another <div> with a class “wrap”, for which we use the “relative” value of the position property.

For the child element, we set the position to “absolute”. Also, you need to set both the left and right properties to 0.

Example of making a child <div> element wider than the parent <div>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .parent {
        width: 450px;
        background-color: #c0c2c2;
        margin: 0 auto;
        position: static;
      }      
      .wrap {
        position: relative;
        padding-top: 130px;
      }      
      .child {
        background-color: #535fcf;
        position: absolute;
        left: 0;
        right: 0;
        height: 100px;
        top: 30px;
      }      
      div {
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="child"></div>
      <div class="wrap"></div>
    </div>
  </body>
</html>
Try it Yourself »

Result

<div class="demo px-2.5 mt-1 mb-5 not-prose"> XFI2 <div class="child"> XFI3 <div class="wrap"> </div> </div> </div>

Let’s see another example, where we use “vw” and “calc”. In this case, we set the child element’s width to be 100% of the viewport width by using a percentage viewport unit (vw), then, we move it to the left side (by the distance of the viewport’s half, minus 50% of the width of the parent element) with the left property. We also apply overflow-x: hidden to the body to prevent the horizontal scrollbar that appears when the child element’s 100vw width extends beyond the viewport edges.

Tip

If you do not set the box-sizing to "border-box", you would also need to subtract paddings and borders.

Example of making a child <div> wider than the parent <div> by using "vw" and "calc":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        overflow-x: hidden;
      }
      .parent {
        max-width: 400px;
        margin: 0 auto;
        padding: 1rem;
        position: relative;
        background-color: #c0c2c2;
      }
      .child {
        width: 100vw;
        position: relative;
        left: calc(-50vw + 50%);
        height: 100px;
        background-color: #535fcf;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="child"></div>
    </div>
  </body>
</html>
Try it Yourself »
Tip

It’s better to hide the horizontal overflow of the scrolling container, because some browsers may display a horizontal scrollbar even when there is no overflow. Use overflow-x as in the example above.