When child divs are floated, parent divs lose auto-height

Question

I have a parent div called main. It has a bunch of child divs in it, which I floated left or right.

When I finished floating the last one, the height of the main div completely vanished, throwing off the layout of my page. I gave it a height:100%; just for now, but it will be overly tall on most resolutions. How can I keep it at a fluid height, only as much as needed to contain the elements?

Answer 1

Contain your floats.

On the div called main add overflow:hidden;. That should contain it.