Good way to align HTML footers

EDIT ** I have recently decided that this is not the best way to align footers.  Not a bad way but it broke for me in a couple of situations.  **

I was building a demo website yesterday and came across the age old problem of aligning my footer row with the bottom of the screen.  I have always had great success with creating websites that scale horizontally to fit any size screen but it has (at least for me) been a real pain to get that footer to line up properly vertically.

Of course you only want it to push the footer to the bottom of the screen if the header+body content leaves white space; when there is enough content it needs to behave like a normal footer would.  What a pain!  HTML 4 and 5 really don’t have a good way to do this natively (surprisingly).

So, off I went looking for some sort of CSS solution to this tricky situation and stumbled across some guys code that seems to address the problem.  I tried it out and voila; it worked very well; first try and in all browsers…. awesome!

So here’s how I did it.

First I had to take my HTML object code and create 4 <DIV> tags.  The DIV’s were needed for the 3 obvious sections (Header, Body, Footer) and then an overall DIV that wraps everything in a single DIV called ‘container’.

The basic structure is like this:

<DIV id=”container”>
<DIV id=”header”>…</DIV>
<DIV id=”body>…</DIV>
<DIV id=”footer”>…</DIV>
</DIV>

Of course I had some HTML where you see … above, but for simplicity of explaining this I have swapped it out.  The only caveat to this technique is that the footer has to have an absolute size defined.  In my case, the footer was exactly 107 pixels high; so I set it to that and pulled everything together using the following CSS:

<style media=”screen” type=”text/css”>
html, body { margin:0; padding:0; height:100%; }

#container { min-height:100%; position:relative; }

#header { background:#fff; padding:0px; }

#body { padding:0px; padding-bottom:107px; /* Height of the footer */ }

#footer { position:absolute; bottom:0; width:100%; height:107px; /* Height of the footer */ background:#fff; }

<!–[if lt IE 7]>

<style media=”screen” type=”text/css”>
#container { height:100%; }
</style>
<![endif]–>

That’s it… I just jammed the CSS above directly into my <head> section and voila!! Automatic moving footers… just need to adjust the footer in the CSS and it works.  The last little bit is apparently for a flaw in IE7 that probably doesn’t scale properly and only applies in that scenario.

So far so good; happy scripting!

~JCF