0





129
1

I want to make a class full bleed but I cant.

Here is the HTML :

<div class="main-class">
  <div class="background">
    <p>some info in the background</p>
  </div>
  <div class="content">
    <p>Some random content</p>
  </div>
</div>

and css :

.main-class{
  padding: 20px;
  width: 100%;
  background-color: #fff;
  display: inline-block;
  box-sizing: border-box;
}
.background{
  margin: -20px;
  background-color: #eee;
  display: inline-block; // must use inline-block
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}
.content{
  margin-top: 30px;
}

and here is a demo: https://jsfiddle.net/uumkjLy8/1/

the background class must be full bleed with background but as seen in the demo there is white space on the right side.

Question author User435443643 | Source

0


1

The background element is inside of an element that has padding, meaning it can only extend the full width if you do some sort of "cheesy" method to extend it outside of its parent element (width > 100%, etc).

Your negative margin is not going to fix the width because it is only moving the div, not enlarging it. With 100% width and a parent that has padding, it will never fully cover its parent's width.

See this fiddle please: https://jsfiddle.net/uumkjLy8/6/

I've removed the padding from .main-class, as well as the negative margins on your .background.

Answer author Santi

Ask about this question here!