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