Question

I have noticed that both IE6 and IE7 push the parent div down when an element inside has padding-bottom … what is the best fix for this? Is it possible to fix this with valid css?

EDIT

The solution I used was to set overflow: auto in the child element (as mentioned below in the accepted answer). I went with this approach because my child element height was dynamic, and thus I couldn’t set it.

Answer 1

padding-bottom is added to the child elements total height, so even if the child element is empty, padding-bottom:10px; will give it a total height of 10px. And in all modern browsers, the parent element will expand to give space to it’s child(s).

But if you wish to have a set height on the parent, you could just set a height on the parent and control the child’s content by overflow:auto/hidden/scroll..

Or you could set parent as position:relative; and set position:absolute; to the child element.

Kinda depends on exactly what you want..