The Footer Fix
Ever have that pesky footer that never seems to sit on the bottom tip of the page because the focusing content is shorter than the navigation? You may want to fix such a problem, but perhaps you may not want to make horrendously long gaps between your footer and your content, and you may not want to use crazy javascript doo-dads just to get the same effect. Look no further! I shall explain, with just simple, logical fragments of codes on how to make your footer as fluid as the height of your design.
(To see an example, click the image to the left) First, please note that this will only work with elements using the CSS float
declaration, and the same method will not work with the CSS element position
. However, using position
should be common sense to workaround (nest the footer within the layer that is containing the rest of the content).
If you have two layers floating left and right, you will find that the footer will attempt to change its layer to become mushy with the other layers, and therefore causing a bit of a mess. Logically, you would use clear
to make the content steer away from squashing it into the other content, but it doesn’t seem to work; once the content is reduced in height, the footer will follow it, but it will not follow the other content areas and therefore will make it mush into the other.
By thinking inductively, you will find that because you can clear one direction, there should be no restriction to clear the other side; this is absolutely correct. To simply put it, you are able to make a container for your footer to also clear the other direction, and therefore it will compliment for both sides of the content, and the footer will remain on the bottom of the page.
Here’s an example of what I mean in terms of code.
CSS Verbose
div#footercontainer
{
clear: left;
}
div#footer
{
clear: right;
}
Derivative
div#footer
{
clear: both;
}
Therefore,
HTML Verbose
<div id="footercontainer">
<div id="footer">
<p>Content</p>
</div>
</div>
Derivative
<div id="footer">
<p>Content</p>
</div>
Thanks to Yingna, I was made aware of the using clear: both
because, being as forgetful as I usually am, I had forgotten that you are able to use one class; so, instead of merely removing the original method, I decided to show how it can be derived with proof. It goes without saying that you are able to use both the verbose and the derivative (if you find that the verbose is easier to remember, as it was for myself), it is still technically valid; however, in terms of wellformedness, it does not necessarily help with presentation clutter and therefore it is valid, but not wellformed. If the latter is not of your concern – although it should be something on your mind when using XHTML, naturally -, it is safe to decide to use this element, but it can and will be corrected for wellformedness and tidiness.
I hope this helps a few people with this designing problem.
I’ve been reading ur other articles and u make me laugh so much. You’re so awsome, no wonder i love you!!
Thuy November 29, 2006 at 9:37 pmLove you too, Thuy!
When will we talk again, huh? I haven’t talked to you in over two years! I demand that we talk at least once on MSN before this year ends!
Franky November 30, 2006 at 12:32 amIsn’t that a roundabout way of going about things? Why not just use one layer and do clear: both; ?
Yingna November 30, 2006 at 4:36 pmHmm. I never really picked up on that. I forgot that you could declare both sides, heh. Well, yeah, that is correct. Thank you very much for the correction.
Franky November 30, 2006 at 8:03 pmYou should take out your first method then, because that method would not be good or preferred within the CSS/webmaster community. It writes more CSS than needed, which causes your website to bulk up and that’s bad for loading purposes (even if a little). Well, it’s bad for anyone who wants a clean and clear-cut website ;)
Yingna November 30, 2006 at 8:18 pm