Make an element as wide as the grandparent

Question

I have the following markup where #content is 80% wide and contains .slide elements. I want the slides to be as wide as their grandparent (i.e. bod

Answer 1

Try using this:

body {
  margin: 0;
  font: medium monospace;
  background: lightgray;
  overflow: hidden;
}
#content {
  margin: auto;
  width: 80%;
  background: white;
}
#content:before,
#content:after {
  content: "";
  display: table;
}
.slide {
  height: 6em;
  background: indianred;
  width: 100vw;
  transform: translateX(-10%);
}

<div id="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <blockquote>
    <p>Phasellus euismod dolor imperdiet!</p>
  </blockquote>
  <div class="slide">Donec mauris tellus</div>
  <p>Pellentesque sit amet venenatis diam, at interdum tortor.</p>
  <ul>
    <li>Quisque ornare mi in pharetra porttitor.</li>
    <li>Nulla ultrices quam nec vehicula porta.</li>
  </ul>
</div>

Answer 2

You could use negative margins with corresponding padding + box-sizing:border-box

FIDDLE

body {
  margin: 0;
  font: medium monospace;
  background: lightgray;
}
#content {
  margin: auto;
  width: 80%;
  background: white;
}
#content:before,
#content:after {
  content: "";
  display: table;
}
.slide {
  height: 6em;
  background: indianred;
  margin: 0 -12.5%; /* 20% of body = 25% of 80% content... so 12.5% on each side */
  padding: 0 12.5%;
  box-sizing: border-box;
}

<div id="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <blockquote>
    <p>Phasellus euismod dolor imperdiet!</p>
  </blockquote>
  <div class="slide">Donec mauris tellus</div>
  <p>Pellentesque sit amet venenatis diam, at interdum tortor.</p>
  <ul>
    <li>Quisque ornare mi in pharetra porttitor.</li>
    <li>Nulla ultrices quam nec vehicula porta.</li>
  </ul>
</div>

Answer 3

Use this instead. Here is a fiddle

HTML

<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

<div class="slide">Donec mauris tellus</div>

<div class="content">
  <p>Pellentesque sit amet venenatis diam, at interdum tortor.</p>
</div>

The CSS

body {
  margin: 0;
  font: medium monospace;
  background: lightgray;
}
.content {
  margin: auto;
  width: 80%;
  background: white;
}
.content:before,
.content:after {
  content: "";
  display: table;
}
.slide {
  height: 6em;
  background: indianred;
}

Answer 4

Depending on the browser support you require, this is either pretty simple or will require some tricky CSS.

One simple version uses the vw (viewport width unit) which has decent support and requires a few simple amends to your setup:

body {
  margin: 0;
  font: medium monospace;
  background: lightgray;
}
#content {
  margin: auto;
  width: 80vw;
  background: white;
}
#content:before,
#content:after {
  content: "";
  display: table;
}
.slide {
  width: 100vw;
  height: 6em;
  margin-left: -10vw;
  background: indianred;
}

<div id="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <div class="slide">Donec mauris tellus</div>
  <p>Pellentesque sit amet venenatis diam, at interdum tortor.</p>
</div>

Answer 5

If your surrounding content can demand a different combination of positioning properties on their own, you could always go with the following.

body {
  margin: 0;
  font: medium monospace;
  background: lightgray;
}
#content {
  margin: auto;
  width: 80%;
  background: white;
}
#content:before,
#content:after {
  content: "";
  display: table;
}
.slide {
  height: 6em;
  background: indianred;
  width: 125%; /*100*(100/80)*/
  margin-left: 50%;
  transform: translateX(-50%);
}

<div id="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <div class="slide">Donec mauris tellus</div>
  <p>Pellentesque sit amet venenatis diam, at interdum tortor.</p>
</div>

Answer 6

You can try this:

.slide {
  height: 6em;
  background: indianred;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

JSFiddle Demo