CSS Footer

This is a technique for creating a CSS footer that will snap to the bottom of the content or the bottom of the page, which ever is lower.  This all without any JavaScript. Download the code here.

I learned the technique through “Google University” [read: I Googled it until I found an answer]. I wish I could give credit, but I’ve since misplaced the link I used. Thanks to whomever.

The technique involves creating an “everything but the footer” div, and setting it’s min-height to 100%. (For IE 6, set height to 100% – compensate for IE 6’s lack of support for min-height, and the fact that it auto-expands divs to fit content). Then you create a “footer” div as a sibling, and set margin-top to the height of the footer. Add a margin-bottom to the “everything else” div that matches, and you’ve got yourself a footer that stays at the bottom of the page.

Download the sample, and give it a spin. 

There’s a bit of JavaScript goodies in there unrelated to the technique as well.  I can’t take credit for NoIEActivate.js, but I also can’t find it’s source either.  It’s great for avoiding the “click here to activate” in <object> and <embed> tags in IE, and doesn’t require any kind of “create a javascript file to source” garbage that plagues servers.

Rob