This example shows how to create a sticky footer using only CSS - no javascript necessary. It has been tested in Firefox, Safari, and Internet Explorer.
The following are important notes for achieving this effect:
- 2 stylesheets are used to create this effect. The first one contains all of the CSS for the site. The other stylesheet contains IE-specific overrides. Be sure to look at the HTML code to see how I declare both stylesheets. This eliminates the need for CSS hacks like "!important" - such hacks exploit bugs in the browser which may be fixed in future versions of the browser.
- An html doctype is also crucial. A missing or incorrect doctype may cause the sticky footer to fail. The sticky footer uses a transitional doctype - I can not guarantee that it will work with other doctypes, so be sure to test it in all browsers when using a different doctype.
- As always, if you float any divs inside the existing structure, don't forget to clear the floats at the end. Clearing the floats enables the browser to get the height of the content. Failing to clear the floats will break the sticky footer layout.
Need to center your layout? No problem! An example of a centered layout with sticky footer can be seen here.