Bottom padding not working on overflow element in non-chrome browsers

Question

If you take a look at this fiddle in Chrome: http://jsfiddle.net/up4Fa/

You will see an overflowing element that has 20px of padding inside it! All fine and working as expected.

However if you run the same test in IE9 or Firefox the text at the bottom touches the edge of the container and the bottom padding is being ignored...

If I do the padding on an inner div it will the issue, BUT I'd much rather fix it with one div and can't understand why BOTH firefox and IE have problems but not Chrome?

EDIT: The text isn't the reason in case anyone was wondering! It will do the same with the red box if I remove the text.

Thanks

Answer 1

It seems that as you are setting the dimensions of the container div indirectly by positioning, those browsers fail to predict the height of the div and render the padding properly. A quick and dirty trick to fix this is to remove the bottom padding of the container:

div.container {
    ...
    padding: 20px 20px 0 20px;
    ...
}

And add a bottom margin to it's last child:

div.container > *:last-child {
    margin-bottom: 20px;
}

http://jsfiddle.net/xa9qF/

Answer 2

A best approach, in my opinion, is using :after selector

div.container:after{
    content:"";
    display:block;
    height:20px; /* Which is the padding of div.container */
}

http://jsfiddle.net/up4Fa/23/