Sticky Footers
Sunday 2 September, 2012
One of the reasons I put this site together was to help me keep track of things I learn about software development. Unsurprisingly, the process of redesigning and redeploying my website has been a good opportunity to update my knowledge of HTML and CSS. Of course, since this website is a personal project, I have a few advantages compared to an important business project:
- I don't have to worry about scalability, since I expect there will be at most 5 readers of this blog. I'll be very pleased if I turn out to be wrong about this point.
- I don't have to worry about IE6, since I don't care if users of that browser can read my site. This means I can focus on learning about HTML5, and avoid dicking around with IE specific hacks.
To expand on the second point slightly, what I was actually hoping I could do was keep my HTML as pure content, and use pure CSS to control the site appearance. I figured that if I could keep the design simple enough, surely I wouldn't need to ruin my HTML by putting in non-content elements for the purposes of getting content to appear where I want it to.
I was wrong.
It turns out that forcing a footer to stick to the bottom of a mostly empty page is tricky to do without Javascript. It's not especially difficult, but the solution certainly doesn't conform to my idealised vision of keeping the content/presentation separate. I'd be very interested to hear from some full-time web developers about how they feel about these kinds of things - is it better to use a bit of Javascript for something like this in order to avoid this kind of coupling?
If you're interested in the technique, there's a good write-up of how it works here.