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

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”, which means that elements are placed according to the document’s normal flow. Here, we add the width of the parent container and specify its background-color and margin as well.

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

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.

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>