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.
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..
Check your setting a doctype and not running into quirksmode, next use a reset stylesheet to make sure that all your elements start of on the same foot.
If your still getting additional padding in a certain version of IE, use a conditional comment to add an additional stylesheet for that browser.
I haven't seen IE8 or Firefox "push the parent down" when padding is applied to a child element; it's just that the parent element's height expands to accommodate the child. This is the correct automatic behaviour in CSS. I made a brief demo:
http://robertgrant.org/testbed/paddingbottom.xhtml
Feel free to try it in IE6/IE7 and see what happens (needs Javascript enabled to make the link work, but you can see what's going on even without that).
If you want to constrain the parent's height, then set it (e.g. height: 100px) and set its overflow property to hidden.