Question

I’m using css sticky footer from http://www.cssstickyfooter.com/

Why do we need: #main{overflow:auto;} and #footer{position: relative;}?

Seems like it works without it (I’m not talking about Opera and IE fixes).

Answer 1

overflow:auto; will simply add the scroll bar if the page is longer than what can be displayed based on your screen height. I’ve used it before and believe it ensures your footer stays visible at the bottom of the page when you scroll.

Have you tried it on a page that is longer than the screen can display to see how it behaves?

Quote from cssstickyfooter.com:

No Need for Clearfix Hack!

Many CSS designers will be familiar with the Clearfix Hack. It solved
a lot of problems with floating elements. A previous version of this
Sticky Footer solution used it. Instead, a more modern and easier to
code solution is the overflow statement. We apply it to the main
to help get the footer to stick in Chrome. It also solves issues that
come up when using a 2-column layout where you float your content to
one side and your sidebar to the other. The floating content elements
inside the main can cause the footer to become un-stuck in some
browsers.