This demo uses a dummy float in the html for Opera and IE8 compliance.

At the cost of that non-semantic dummy float in the html you can eliminate the body:before and wrapper:after pseudo elements used in Example#1. Use this simple method if you find the CSS for those pseudo elements in Example#1 difficult to understand.

Reduce viewport height to scroll content and test sticky footer.

This is just a test float to ensure that #content is containing it's floats.

Expand Float

Content

Content

Content

Content

Last line of text shows #content div's bottom-padding.
It protects text from sliding under the footer which was pulled up with a negative top margin.