How can I use “float: left” in a div without breaking the containing element's height?

Question

It seems that floated HTML elements don\'t expand the heights of their containers. For example, consider the following code:

Answer 1

You need to clear the float, which returns document flow back to normal. Use clear:left (or right, or both if such floats need to be cleared) on the last element that should reset the flow. Also read up on ClearFix. It should be noted that ClearFix can get a little sticky with IE... if you have control over the markup, sometimes it is safer to use the traditional clear.