CSS div floats

One problem with putting div floating inside a container (such as another div) is that the containing div does not handle the size very well and it ends up collapsing.

Let’s say you have the following HTML:

<div class="container">
  <div class="float"> float 1 </div>
  <div class="float"> float 2 </div>
  <div class="float"> float 3 </div>
</div>

and the following CSS:

.container {
  border: 1px solid green;
}
.float {
  border: 1px solid red;
  width: 50px;
  float: left;
}

You’ll end up with with a collapsed container (in green).

If add overflow: auto; to the container, then it will prevent it from collapsing:

.container {
  border: 1px solid green;
  overflow: auto;
}