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

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

  
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  

    
Phasellus euismod dolor imperdiet!
  
  
Donec mauris tellus
  
Pellentesque sit amet venenatis diam, at interdum tortor.
  

    
Quisque ornare mi in pharetra porttitor.
    
Nulla ultrices quam nec vehicula porta.