How to make a CSS element's width larger than its parent

Question

I am trying to find out how to make an element's width N% larger than its parent (or a particular percentage of the viewpoint).

So far I found the following snippet from an answer https://stackoverflow.com/a/24895631/54929 However, no matter how I modified the values to calc( ) I haven't quite figured out how to get e.g. an element 25% bigger than its parent (or 75% of window width) etc and have it centered.

body,
html,
.parent {
    height: 100%;
    width: 100%;
    text-align: center;
    padding: 0;
    margin: 0;
}
.parent {
    width: 50%;
    max-width: 800px;
    background: grey;
    margin: 0 auto;
    position: relative;
}
.child-element {
    position: relative;
    width: 100vw;
    left: calc(-50vw + 50%);
    height: 50px;
    background: blue;
}

<div class='parent'>
    parent element
    <div class='child-element'>child-element</div>
</div>

score 1 · Answer 1 · answered Jul 21 '17 at 22:54

The calc( ) has nothing to do with it. If you want to make the element larger than its parent by a specific percentage, then simply add that percentage to 100%. For example, if you want it bigger by 50%, then give it a width of 150%.

If you want to center it too, then give it a negative left that is equal to half of the percentage, -25% in the example above.

body,
html,
.parent {
    height: 100%;
    width: 100%;
    text-align: center;
    padding: 0;
    margin: 0;
}
.parent {
    width: 50%;
    max-width: 800px;
    background: grey;
    margin: 0 auto;
    position: relative;
}
.child-element {
    position: relative;
    width: 150%;
    left: -25%;
    height: 50px;
    background: blue;
}

<div class='parent'>
    parent element
    <div class='child-element'>child-element</div>
</div>

I don't agree with statement "The `calc( )` has nothing to do with it", it's false. It will make much more sense to use `calc` when adding some other units (like `px` or `vw` to `100%`) but it technically possible to use `calc(100% + 25%)`. — Vadim Ovchinnikov, Jul 22 '17 at 12:58
@VadimOvchinnikov What I meant, for the particular OP case, `calc()` is not required to do the job. Why would you use it to calculate 100+25, can you not do the math by yourself and type the result 125? As you can see, none of the other answers uses `calc()` because it just doesn't make sense. — Racil Hilan, Jul 22 '17 at 13:11

Johannes · Answer 2 · 2017-07-21T22:59:08.497

You can use this CSS:

.child-element {
    position: relative;
    width: 125%;
    left: -12.5%;
    height: 50px;
    background: blue;
}

The width is defined as a percentage (as you wanted it) , and the left value (in percent) is simply half of the width minus (125% - 100%) / 2 = 12.5%.

body,
html,
.parent {
    height: 100%;
    width: 100%;
    text-align: center;
    padding: 0;
    margin: 0;
}
.parent {
    width: 50%;
    max-width: 800px;
    background: grey;
    margin: 0 auto;
    position: relative;
}
.child-element {
    position: relative;
    width: 120%;
    left: -10%;
    height: 50px;
    background: blue;
}

<div class='parent'>
    parent element
    <div class='child-element'>child-element</div>
</div>

score 0 · Answer 3 · answered Jul 21 '17 at 22:53

0

Example of child that is has twice bigger width than its parent (and also centered):

 .child-element {
   position: relative;
   width: 200%;
   left:-50%;
   height: 50px;
   background: blue;
 }

answered Jul 21 '17 at 22:53

Vlado Pandžić

4,879
8
44
75

score 0 · Answer 4 · answered Jul 21 '17 at 22:54

To make the child element 25% larger than its parent, I would set its width to 125% and move it left 12.5% (half of 25%).

body,
html,
.parent {
  height: 100%;
  width: 100%;
  text-align: center;
  padding: 0;
  margin: 0;
}

.parent {
  width: 50%;
  max-width: 800px;
  background: grey;
  margin: 0 auto;
}

.child-element {
  position: relative;
  width: 125%;
  left:-12.5%;
  height: 50px;
  background: blue;
}

<div class='parent'>
  parent element
  <div class='child-element'>child-element</div>
</div>

To make the child element 75% of the viewport, I would set its width to 75vw and set its left edge to 12.5vw (half of the remaining 25vw).

body,
html,
.parent {
  height: 100%;
  width: 100%;
  text-align: center;
  padding: 0;
  margin: 0;
}

.parent {
  width: 50%;
  max-width: 800px;
  background: grey;
  margin: 0 auto;
}

.child-element {
  position: absolute;
  width: 75vw;
  left: 12.5vw;
  height: 50px;
  background: blue;
}

<div class='parent'>
  parent element
  <div class='child-element'>child-element</div>
</div>

How to make a CSS element's width larger than its parent

4 Answers4