Updated example with fix in place:

http://www.pmob.co.uk/temp/sticky-footer-ie8new-no-table.htm

!important should be used sparingly otherwise it will negate its usefulness.

Nobudy makes websites like in example 5 now, so i think that you may delete it.

Hi Paul,

I had also noticed that overflow:hidden; on the parent div caused problems in Opera.

Opera’s issue along with the option of allowing content to protrude outside of the parent without being cut off was the reason I had preferred the :after float clearing method.

Erik’s solution of height:1% does indeed seem to be a solid fix for IE8 which eliminates the need for any Conditional Comments or IE stylesheets.

#outer:after {
clear:both;
display:block;
height:1%;
content:”";
}
As the parent height is auto, the 1% height would be none as the content is. Would such rule work reliably for IE8 min-height do you think?

Actually that works well for IE8 instead of the display:table so you could use either.

I usually avoid using the :after clearing mechanism on sticky footers because it introduces a space at the bottom in Firefox. However using the negative top margin method as shown above the gap doesn’t seem to appear.

This also raises another interesting point in that adding overflow:hidden to #outer kills the sticky footer effect in Opera.

Therefore to clear floats in the sticky footer version I would now advocate using the :after method instead of using overflow.

So perhaps building this :after method in from the start would be more reliable and avoid using the display:table for IE8 also.

#outer:after {
clear:both;
display:block;
height:1%;
content:”";
}

if !IE 7