css float elements, div or whatever

Publish Date:

If you didn’t know, instead of using a clear:both there’s a really simple and easy way to make a container (like div) have the height of it’s floating children.

Just give it the css attribute overflow:hidden;

Yes, that’s all.

<div style="background-color:#644;">
  parent
  <div style="float:left; background-color:#446; padding:20px; margin:10px 0px 0px 10px;">float:left;</div>
</div>
parent
float:left;
<div style="background-color:#644; overflow:hidden;">
  parent
  <div style="float:left; background-color:#446; padding:20px; margin:10px 0px 0px 10px;">float:left;</div>
</div>
parent
float:left;