When child divs are floated, parent divs lose auto

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.

Answer 2

Are you using relative positioning for your floats?

You'll need to put a fake div in to "hold open" the parent div otherwise. As soon as everything is floated you will lose all basis for height in the parent div. (Nothing is in there.)

Answer 3

inserting "overflow:hidden;" into parent div worked for me.