website design techniques » October 2004: “The Sticky Footer”

The Stinky Footer. Ummm... I Meant ‘Sticky’ Footer.

by John Barrick

 

I see this request floating around a lot — the sticky footer. “How can I make a footer stick to the bottom of the screen and always remain on screen?”

 

Sticky Footer Is Child’s Play

 

The sticky footer turned out to be pretty simple — by that I mean I found the parts to the solution quickly on the Internet, of course! I like figuring out problems on my own but I don’t try very hard at first. Chances are, someone else has done the thinking. So I found someone on the Internet who’d done bascially done the hard part, they just couldn’t get it to be cross-browser, and of course it didn't validate. So as with most people’s code (whether they like to admit or not), this is cobbled together from other sources though I don’t remember exactly whom. Sorry.

 

You can see the basic solution to the sticky footer but this version doesn‘t validate because of some of the code needed. Basically you just create a margin at the bottom of the screen and then “position: fixed” a footer into it that is as tall as the margin. Of course IE falters.

 

Sticky Footer, Extra Toe Cheese

 

So, to the rescue, we have the Deluxe Model Solution to the Sticky Footer or “Sticky Footer, Extra Sharp Toe Cheese” I like to call it. Either way you cut the cheese — I mean slice it — someone’s going to balk at this code so we may as well cover the caveats right away. This version validates in Transitional but it requires some creepy IE Fandango in the HTML. We have to basically pull offending CSS code out of the CSS file and put it in the HEAD inside some tags that only only IE pays attention to. This is solely so you can say, "hey, it validates." So, not the best solution I guess, but it covers the bases that interest me. Hope this helps you with your stinky footer!