CSS – Deal with divs that only contain float divs


Situation:

You have a container with two or more elements with a class of box floated inside it.

Problem:

container height is 0, not getting its inner divs heights.

Example:

HTML:

CSS:

But, if you see the container height with a background-color:red it’s going to be like this:

Possible solution 1 :

The first possible and clean solution, is floating the parent, so the CSS would be something like this:

Possible solution 2 :

A second possible and clean solution, is adding and overflow to the parent, so the CSS would be something like this:

 

Applying any of those solutions above, the result will be as follows, letting the container get the heght of its inner divs: