Margin-Bottom from outer DIV does not work

Question

I'd like to create an outer DIV, which contains several inner DIVs. At the moment, this works perfect. But I have some troubles with the margin of the outer div. If the outer DIV has a fixed height (f.ex. height: 100px;), there will be a margin at the bottom. But if I set the height to auto (it should have only the height of all inner DIVs), the margin-bottom disappears.

Example:

Here, the margin-bottom applies normaly. The height of the outer-box is set to a fixed height: https://jsfiddle.net/v81mehc5/3/

But changing the height of the outer DIV from a fixed height (75px) to auto, the margin-bottom of 40px disappears. https://jsfiddle.net/v81mehc5/2/

What's missing in the second case? What's wrong overthere?

HTML

text before

<div class="outer-box">
  <div class="innerbox-left">left</div>
  <div class="innerbox-right">right</div>
  <div class="innerbox-left">left</div>
  <div class="innerbox-right">right</div>
</div>

text after

CSS

.outer-box
{
  width: 200px;
  height: 75px; /*if height: auto > no margin-bottom will be applied*/
  background-color: #f1f1f1;
  border: thin dotted #ccc;
  margin-bottom: 40px;
}
.innerbox-left
{
  width: 100px;
  background-color: blue;
  float: left;
}
.innerbox-right
{
  width: 100px;
  background-color: blue;
  float: right;
}

Thank you very much for your help.

@UncaughtTypeError: no, it's not a case of collapsing margins. Temani Afif in answer below is right, OP missed to clear after floated elements. — pavel, Dec 05 '17 at 10:09
@dippas like panther i don't agree with this duplication as it's related to floating and not collapsing margin. Maybe another duplication but not this one — Temani Afif, Dec 05 '17 at 10:28

Temani Afif · Accepted Answer · 2017-12-05T10:14:42.993

Nothing is missing but you are using floating elements inside the outer div. So height:auto means height:0 in you case so you are only seeing the margin-bottom (that you thought it's the height).

In order to fix this you need to add overflow:hidden to outer div.

.outer-box
{
  width: 200px;
  height: auto;
  overflow:auto;
  background-color: #f1f1f1;
  border: thin dotted #ccc;
  margin-bottom: 40px;
}
.innerbox-left
{
  width: 100px;
  background-color: blue;
  float: left;
}
.innerbox-right
{
  width: 100px;
  background-color: blue;
  float: right;
}

text before

<div class="outer-box">
  <div class="innerbox-left">left</div>
  <div class="innerbox-right">right</div>
  <div class="innerbox-left">left</div>
  <div class="innerbox-right">right</div>
</div>

text after

More questions related to the same issue for more details :

Why does overflow hidden stop floating elements escaping their container?

CSS overflow:hidden with floats

Great answer, great solution. Thank you very much. – AIRLINK Dec 05 '17 at 17:12 — AIRLINK, Dec 05 '17 at 17:12

score 1 · Answer 2 · answered Dec 05 '17 at 10:15

Floating elements collapse their container. You'll see that if you apply a border to it:

<div style="border: 1px solid #666; margin-bottom: 40px;">
<div style="float: left; height: 100px; border: 1px solid #999; width: 49%;"></div>
<div style="float: right; height: 100px; border: 1px solid #999; width: 49%;"></div>
</div>
Text

You can use a clearing technique to get around this as a possible solution that works in IE8 and up:

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

  .clearfix:after {
      content: "";
      display: table;
      clear: both;
  }

<div style="border: 1px solid #666; margin-bottom: 40px;" class="clearfix">
<div style="float: left; height: 100px; border: 1px solid #999; width: 49%;"></div>
<div style="float: right; height: 100px; border: 1px solid #999; width: 49%;"></div>
</div>
Text

Margin-Bottom from outer DIV does not work

2 Answers2