user435443643 user435443643 - 2 months ago 6x
CSS Question

Inline block css fails to make the element full width

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 class="content">
<p>Some random content</p>

and css :

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

and here is a demo:

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


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:

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