CODEWITHSUNDEEP
csshtmlheight
AKor
AKor

Reputation: 8882

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

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?

Upvotes: 23

Views: 9393

Answers (3)

Petronio Correa
Petronio Correa

Reputation: 1

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

Upvotes: 0

John Lewis
John Lewis

Reputation: 722

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.)

Upvotes: 1

cp3
cp3

Reputation: 2139

Contain your floats.

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

Upvotes: 47

Related Questions