A little neat trick that I’ve now used a few times at work and for other sites I develop is to always make the footer of the site at the bottom. Easy enough you may think at first, but it must stick to the bottom of the browser window, no matter what size the window is re-sized to, or how much or how little content the page has.
A List Apart has a great tutorial on how to do this, and although a little lengthy, their version 3 example page is good enough to use as a basis for your page.
The methods behind this are simple enough after you’ve studied the code for a few moments. First of all, make sure you contain all of your page in… (including the header/footer, etc)
<div id="container">
Secondly, a very important part of the CSS they provide is …
html, body {
height: 100%;
}
Which forces the height to be 100% of both the HTML and Body tags – note that it must be both! I’ve spent far too long in the past trying to work out why my page wasn’t working when I missed the fact the height 100% was applied to the HTML as well as the Body tag.
From there on, the source code on their page should be easy enough to follow as a guideline. I use their Example 3 since its relatively simple and doesn’t include any Javascript. Although it doesn’t support all browsers, it does support the majority (Firefox, IE’s), and that’s good enough for me
Hey sweetie,
Does having a footer at the bottom via css mean that everytime you need to change it, you only need to do it once?
Love
x
Na not quite. This can be done with PHP includes. Easy-easy times
This basically means that if the content of the page is less that the height of the browser window at any time, then the footer is forced to be at the bottom of the window. Makes things look a little neater when you have a site with less content, I think!
loves x
I still cant do it. It I have many line, the footer appears in the middle on the content.. Any solution?
Hi!For me it works very well in all browsers. Thank you very much. I tried many ways but only this worked fine.
Hello David,
Thanks so very much for the hint that setting the html and body container to “height: 100%” . That solved my problem, which was making the footer sticky at the bottom of the page.
Btw: You have a really great looking blog.
Kind Regards,
Kenny