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?”
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.
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!
Brandt S., CIC, CEO Legacy Insurance Solutions, LLC
John did a great job in working with us in creating our first web page. He had a wealth of knowledge on the Drupal platform and advised us in the right direction. I would definitely recommend Way Cool Web Design to anyone.