UPDATE: This sticky footer solution has been updated since the launch of Internet Exploder 8. More recent blog post about it is here. Most the typical problems some people encounter are the same and many have been discussed in the comments below on this post. If you are having problems there is a good chance you’ll find your solution below from someone else who ran into similar issues.
For those that don’t know a sticky footer is a footer that sticks to the bottom of the browser window when the content area is too short to push it down on its own. Having a footer float part way up the page can look like poor design on some sites.
A working solution that actually makes the footer stick to the bottom of the page can be found here.
I’ve played with various methods for creating CSS layouts that use sticky footers but have always found a browser or two that just messes it up. Googling around for sticky footer solutions unfortunately takes you to older pages with outdated techniques. It’s times like that that the age and trust factor of Google’s algorithm fails at delivering true relevance.
Another problem with other solutions I tested was that they broke down when using a floating 2 column layout. The floating content area and sidebar would collapse margins, or something, and the footer would no longer stick. There were also problems with resizing browser windows. As the window was shrunk shorter the footer would break out of its stuck position and sometimes cause footer/content overlap.
One well known solution does work but requires an extra push with an empty div element. Not truly semantic HTML coding, but it works. Though others report that it faces the same problems with floating layouts and resizing browser windows.
I do believe I have a solution that is working now, in 2009, across many browsers. All the big important ones and a whole pile of small ones. Google Chrome in particular was still causing me problems but I fixed that too. It works with floating multi-column layouts and we don’t get re-sized browser window issues. Details on how to use it can be found here.
So as to help others find this new, and working solution sticky footer solution, I created a new website CSS Sticky Footer. The hope is that other will find the solution useful and start linking to it. In time it should rank well in Google and those seeking a footer layout that sticks to the bottom of the page can then find a more updated version than some of those old ones that still rank well.
If you have comments about this sticky footer code you can discuss it here in the comments below.
DoFollow links available for frequent commentors.
- I’m Such a Nerd - Now a Wine Nerd
- An Ode to a Very Special Little Rescue Dog
- Centering a Div in IE9 Using margin:auto
- Playing with HTML5 for First Time
- My Wife is a Food Blogger
- Designing and Coding a Mobile Version of your Website
- A CSS Sticky Footer that Works in 2009 (Chrome too) (340)
- New iGoogle with Left Nav Bar is the SUCK! (194)
- My Cool Ass CB750 Cafe Racer (104)
- Centering a Div in IE8 Using margin:auto (15)
- The State of Local Search in Canada (14)