Exploring Footers

by Bobby van der Sluis

119 Reader Comments

Back to the Article
  1. Dante- go meet some girls, get out and smell the roses or something…from your posts it seems like you don’t have a life. It’s just an article.
    Take it or leave it.
    Move on.

    Copy & paste the code below to embed this comment.
  2. I have moved on. The reason I’m staying here is because I’m trying to find out who it was that spammed up my message board. It was someone from this board. I’m writing a new article, “Give me Javascript or give me death”, explaining why Js should be used.

    Copy & paste the code below to embed this comment.
  3. Javascript is painfully over-used on your site. I’d rather you not tell people to follow your example with things like that strange pixel-coordinate-pointer-tracker. Yeah, like the world has been dying to know where their mouse stands on the screen in pixels. And your dropdowns – hideous and clunky. They kept changing size as I passed over the links, and in some bizarre cases, the pop-out menu was disconnected from the link that produced it, so it was impossible to actually make it to that menu and use those links before it disappeared. I don’t know, I just get the feeling you ought to spend less time ranting about Javascript and more time actually getting it to work if you’re trying to set some kind of great example. And you should probably ditch the tables and follow web standards too!

    Copy & paste the code below to embed this comment.
  4. Leonard Zerri wrote:
    >>>
    Utterly worthless. When the standards people and browser people get their act together I will delve into CCS beyond text formatting.
    <<<

    You know, this is 2004, not 1998. There are LOTS of things beyond text formatting that you can do with CSS, without having to resort to code-cluttering hacks or JavaScript.

    Copy & paste the code below to embed this comment.
  5. Paul O’Brien: http://www.alistapart.com/discuss/footers/8/#c6700

    Good to see that other people have found similar approaches to tackle the same issue.

    The article explains why a height of 100% works in IE5/WIN and IE6/WIN.

    I have to disagree with you that there is an error in the article. If you set the height of the container to 100% you get the following:  http://www.bobbyvandersluis.com/articles/ala_footer_example2discuss.html
    This example doesn’t work in Mozilla and Opera 7.

    A closer look at your example: http://www.pmob.co.uk/temp/3colfixedtest_4.htm
    tells me that you pass

    html>body #outer{height:auto;}

    to non-IE browsers too.

    Copy & paste the code below to embed this comment.
  6. I learn a lot from the articles here at ALA, but even more from the discussions that follow them! (Although these Dante Diatribes are distracting to the point of the forum here, IMHO.) I particularly enjoyed Alberto’s http://www.alistapart.com/discuss/footers/4/#c6589 comments and found them valid and entertaining as well. I thought he spoke well to the confusion and frustration some of us obviously feel about the problems and “solutions” in trying to make a living making useful, usable Websites.

    But whatever you may or may not think is the best way to code a page these days, the fact is that like an extended drum solo in a bad rock song, using CSS and XHTML in your coding is coming and there’s nothing you can do about it. Standardization, Compliance and Usability are going to become more and more required, and knowing creative tricks and workarounds like these is going to make your skills a much more valuable commodity to your employers, customers or clients. If all you end up knowing or using is basic HTML then your going to find your self outsourced/offshored or replaced by some fascistic Content Management System that can do that kind of stuff automatically, and just as bad, without you.

    I’m just as annoyed, frustrated and confused at the whole state of affairs as the next coder here, but I do find the whole situation exciting as well. This is the “cutting edge” here folks, and though I don’t particularly have a use for this “solution” I like to learn something new and may find a use for the functions used here. I also appreciate the time and effort that these folks and most of you fellow readers and commentors here put into researching, developing, testing and providing this kind information and solutions to us FREE!

    When I feel like I’m getting too wound up or serious about something, I like to keep a quote the Firesign Theater in mind in these kinds of situations – “Everything You Know is Wrong!” I laugh to myself and move on to learn some more, even if it turns out to be wrong sometimes too.

    Keep up the great work here all of you, and give me more!

    Copy & paste the code below to embed this comment.
  7. Apparently posting something along the lines of “Here thar be trolls” is the most effective kind of troll bait.

    But I do think that Dante was fine until someone provoked him.  He wasn’t exactly professional, but see that whole levity argument that’s already been discussed around here.  But, two wrongs don’t make a right and having someone behave towards you like a snotty little brat does not grant permission to act the same.  That comment has nothing to do with age, just behaviour.  I have a 4 year old daughter and I fully expect her to be able to code circles around me in 10 years.

    Copy & paste the code below to embed this comment.
  8. I know. The pixel tracker thing, oops. I forgot to remove it. I used it to find the position of the menus. I’m redesigning anyway, but for the time being the only people who will have trouble with the menus are non-IE users, the number of which is far too small for me to care about. Most of my users use IE, so I’m not that concerned; not to say I’m not concerned at all.

    Copy & paste the code below to embed this comment.
  9. I visited using IE 6 for Windows, so I don’t know, things might not work so smoothly after all. Beats me.

    Copy & paste the code below to embed this comment.
  10. In the new navigational redesign of my site, the drop downs will go the way of Abe Lincoln in Forbe’s theater.
    Guess who’s been reading the works of Walt Whitman?
    Derek, in 10 years your daughter will be interested in boys and other stuff. The only coding she’ll do is with cell phone text messaging, which is technically encoding.

    Copy & paste the code below to embed this comment.
  11. What does it mean when the ‘body’ and ‘html’ elements are set to 100%?  Is there some official/semi-official information on this?

    Also, two (very) small items.  There’s still a typo in the article.  “Now you can calculate…” should be “Now THAT you can calculate…”.  And, it’s maybe a little clearer in the JavaScript to have:

    if (windowHeight <= (contentHeight+footerHeight))

    … rather than the more complex expression that subtracts the two terms and compares them to zero.

    Great article!

    Copy & paste the code below to embed this comment.
  12. Thanks, you can find more info about this at:

    http://www.quirksmode.org/css/100percheight.html

    Copy & paste the code below to embed this comment.
  13. Often found that printing a webpage gave very poor results with regard to page breaks. If this code can be adapted to set page breaks, than I think it would have a strong impact on the web community.

    Copy & paste the code below to embed this comment.
  14. Very useful article. I solved problem with the similar positioning on one my project. Thanks

    Copy & paste the code below to embed this comment.
  15. Take a breath.  Breath deeply.  I’ve seen where some of you think that this technique is pointless.  Perhaps you’re overlooking the possibilities.

    “I cannot see it as useful to have a footer at the bottom of the browser window.”

    Well, here are some examples of when it might be quite useful.  Let’s suppose you have a copyright block and your using global CSS for a site template.  This is a great way to keep a uniform look about your site, or suppose for a moment that you have dynamic content and don’t want to destroy the layout of your page as it changes.  Or how about that fancy web-based email system you just implemented.  Or any CGI interface for that matter.  It’s much easier to program using a global stylesheet that it is to adjust table layouts for each individual page the script returns.  Granted, if you have only a few select pages requiring this technique, it may be easier and faster to use tables, but when used on a wider scale.  Or maybe you have a wide range of pages that carry your rotating banner or some other dynamic content such as an RSS feed.  This is a simple way to ensure proper alignment without having to reconstruct each person’s page layout.

    A simple technique, with limitless possibilities.  Perhaps we need to start thinking outside the box.

    Very good article.

    Copy & paste the code below to embed this comment.
  16. Just to clarify, a footer appears and the bottom of an element and as such is much easier to control.  So in essence this technique may not be necessary in most cases.  However, let’s assume that we expand this technique as proposed to align elements in other vertical positions.  Say you want to align a watermark or a DHTML menu, or some navigational buttons.  Maybe you want to align some form elements so that your form will align nicely to fit a browser windows regardless of the window size or default accessibility settings.  Now we have a simple technique that has become quite priceless.  Not to mention that it is cross-browser compliant which, in essence, could be it’s greatest attribute of all.

    Copy & paste the code below to embed this comment.
  17. The “Dead Center” examples both don’t work in IE/Mac if the doctype is XHTML Transitional: I guess it’s not the biggest of all deals but enough to have me cursing to Redmond again. All I want is to center an old-school table layout with a nested <div> vertically and Internet Explorer keeps f&/%n everything up. Oh well, what’s new?

    Copy & paste the code below to embed this comment.
  18. You’re not the only with IE/Mac problems. Peter-Paul Koch declared IE 5.2 Mac a “Bug Ridden Crash Prone Piece of Junk”. I can’t really test this as I don’t have a Mac.

    IE on mac has never been good.

    Give Internet Explorer some credit.

    Copy & paste the code below to embed this comment.
  19. Hey Dante,
    I think the problems you are having with CSS and non-IE browsers relate to a missing } in your CSS. I looked at it the other week and that’s what I saw.

    Copy & paste the code below to embed this comment.
  20. It’s caused by this:
    -moz-box-sizing
    I put that there because the Moz box model is the crack model (the W3C model), the one that makes no sense.
    Solution:
    Put whatever selector that contains -moz-box-sizing at the end of the stylesheet; making sure -moz-box-sizing is the last declaration.

    Copy & paste the code below to embed this comment.
  21. Much as I agree with the separation of presentation from content it is truly sad that the designers of css failed adequately to address some of the most basic aspects of page design, namely positioning. Positioning is a mental horror story. It is non intuitive and even though it gives the illusion of being easy it is actually really hard to pick up on the fly.

    Why on earth are elements which have spatial properties suddenly denied those properties the moment they’re positioned? And appears to have different default margins to … etc etc. You solve the problem for one website and when you move on to the next one suddenly you find that you have learnt nothing. The time wasted is astronomic.

    Sure, the solutions when implemented are really simple (or appear that way) but getting to that solution is just a nightmare. I have years of computing experience and all the help I need in the form of Hakon Lie and Bert Bos’ book “CSS designing for the web” and a host of links to useful sites, and membership of relevant discussion boards and still my head hurts.

    I havn’t the time but someone should write a good critique of css so that people like me can read it from time to time to releve the tension it causes. The fact of the matter is that browser differences with respect to javascript, dom, html, xhtml, css have turned web programming from what it ought to be – a really great experience – into a boring, dispiriting and morale destroying chore. At the very least we have Perl and Php to generate this stuff but boy it gets to me the extent to which my life is pouring into this machine and the little I’m left with to show for it – not even fun.

    Thanks for the space in which to explode.

    Copy & paste the code below to embed this comment.
  22. I’m trying to design a site without the use of tables and I found your article and the discussions that followed it very useful. I don’t have much experience with CSS or for that matter JavaScript and I’m going nuts trying to get this page to load properly. I have been looking at lots of different examples and pulling in bits of code from various places and therefore my code/style sheet looks like a dogs dinner!

    http://dev2.beckoz.com/CSStesting/

    My main problem is the footer hanging off the bottom of the page. I don’t know if the problem is in the CSS or the JavaScript (probably both!). Any help would be much appreciated.

    Copy & paste the code below to embed this comment.
  23. Tucker,

    First: only use one of the methods described in the article, not both. You should base your decision which one to use on the targeted audience you would like to serve. In this case you have to decide if you want the footer effect to be there for Mac users too (DOM/JavaScript method) or not (CSS method).

    Second: make sure you nest all your page elements inside either the main content block or the footer block. Except for the body and container div element for the CSS method, you shouldn’t need any elements outside these blocks.

    Third: the best way to develop a website using the footer (or any other) technique is by starting small with the basic technique (you could use the finshed examples as a template) and slowly building up your page. If something breaks you can easily see what element causes the error.

    If you have built a page that works fine and after an update it breaks, you should test it the other way around; you reduce code to see what causes the problem.

    In your case I would start over keeping points 1 to 3 in mind. It sounds like the hard way, but the best way to learn a new technology is to learn from your own mistakes.

    Please let me know how you proceed, if you get stuck again, I will help you on your way.

    Copy & paste the code below to embed this comment.
  24. I don’t think javascript is the best solution for vertical-horizontal centering. I’d rather hack the stylesheet if only one browser is the problem (in this case IE 5.2 for Mac). See this article http://www.hicksdesign.co.uk/articles/archives/000030.php

    Copy & paste the code below to embed this comment.
  25. Thanks for your help Bobby. I have gone for the CSS method to keep it as simple as possible for me and I have started again. But I’m still having problems!! :o(

    http://dev2.beckoz.com/CSStesting/attempt3.htm

    I have intentionally left the content background blue as a visual aid. My main 2 queries are:

    1. How do I make the content area stretch down to meet the footer? The only way I could get this to work was by making the height of #inner 100%, but this caused the footer to disappear off the bottom of the page! Have you any other suggestions?

    2. How do I get the footer to have a width of 100% of the screen?  The footer sits within #container which has margin:0px 20px 0px 14px; The only way I could get it to stretch across was to make it 106% but it didn’t look right! You’ll see that I have put in margin-left: -50px; but this didn’t make any difference. Where am I going wrong?

    Your help is much appreciated.

    Copy & paste the code below to embed this comment.
  26. This version already looks way better. The footer technique is in place and working.

    Tucker said: “1. How do I make the content area stretch down to meet the footer?”

    You shouldn’t. The theory behind the technique is that only content stretches up the content area vertically.

    However if you want some visual effects that stretch up, you can always use the backgrounds of parent blocks that do stretch up to the footer (or actually the bottom of the page), like body and container.

    Here you need to plan your layout a little bit ahead. You start with the background of the most backwards layer and basically stack up background colors and (repeated) images of contained blocks until you have built up your layout. It always involves a little bit of puzzling, but I believe that any layout is possible this way.

    Tucker said: “2. How do I get the footer to have a width of 100% of the screen?”

    Just get rid of the margins of your container block and the negative margins of your footer block.

    The container should be the null point for positioning, so position all your elements relative to this block. You can always use other subcontainer blocks within your main container to position grouped elements.

    Hope this clears up the skies.

    Copy & paste the code below to embed this comment.
  27. Cheers Bobby for your last response. It looks like it’s now working but I have noticed than when I’m resizing the browser window all the text/content sometimes flashes/disappears! Is this something that I have done or is it just a quirk of the browser?

    http://dev2.beckoz.com/CSStesting/attempt4.htm
    I’ve also noticed a big jump in the content when the page is refreshed; I thought at first this might be due to FOUC ( see http://www.bluerobot.com/web/css/fouc.asp ) but after doing some testing it doesn’t appear to be, any ideas?

    Copy & paste the code below to embed this comment.
  28. I didn’t encounter the issue on IE6 and Firefox 0.8 both on WIN2K. It maybe has something to do with the browser/OS combi you are testing with.

    However in this version you broke the footer technique in non-IE browsers. Probable cause is the height: 80% that you added to your #inner block. I advise you to test your layouts in multiple browsers, so you can see where things go wrong.

    Next two small things to take care of:
    1. Get rid of the margin-bottom of -1px of your #footer block, it causes that a scrollbar is displayed in non-IE browsers
    2. Get rid of the duplicate </body> tag

    Copy & paste the code below to embed this comment.
  29. The article starts with “Picture a container with a fixed width”.. but as soon as I apply a specific width to the container, the effect is canceled and the footer jumps back to the top. I browsed around this discussion area but did not find any info on this. Can anyone comment?

    Thanks

    Copy & paste the code below to embed this comment.
  30. Phil, you are right, if you apply a fixed width to the container IE6/WIN doesn’t seem to like it.

    There are two different ways to resolve this:
    1. Apply the fixed width to the content (and footer) container
    2. Treat IE6/WIN like IE5.x/WIN and use Vinnie Garcia’s proposal: http://www.alistapart.com/discuss/footers/3/#c6564

    Copy & paste the code below to embed this comment.
  31. To be more clear, the first point should say:
    1. Apply the fixed width to the content (and footer) block instead of to the main container block

    Copy & paste the code below to embed this comment.
  32. Thanks for the second part, that is just what I needed for a project I’m working on.  I now am able to keep the form’s reset and submit buttons in the viewport while the user scrolls through the form.  You really should put a note in the article about this and not keep it buried in the comments.  At first I tried the code from the article and it didn’t appear to do anything, since the form was longer than the viewport.  Then I remembered sometimes revised methods are posted in the comments and I found what worked for me:
    http://www.bobbyvandersluis.com/articles/ala_footer_variation2.html

    Copy & paste the code below to embed this comment.
  33. When trying to print it only prints the viewport contents and not the entire page.  Is there a way to fix this?

    Copy & paste the code below to embed this comment.
  34. Will, you can customize your print-outs by using a print style sheet.

    With something like:

    <style type=“text/css”>
    <!—
    media print {<br /> &nbsp; #content { height: 100%; }<br /> &nbsp; #footer { display: none; }<br /> }<br /> media screen {
      …current style rules…
    }
    —>
    </style>

    you should be king again.

    Copy & paste the code below to embed this comment.
  35. MS IE is big piece of …. :-)

    Copy & paste the code below to embed this comment.
  36. I was trying to hack this to get a floating navigation menu.  While the theory is good, I don’t seem to be able to make it work in practice.  (And perhaps I’m putting the elephant in the cart, coding-wise.)

    Working sample is at:
    http://www.hedgewizard.net/test/PA-test.htm

    (and yes, I know the rest of the site is a mess…  I’m working on cleaning it up.) <grin>

    Grant
    grant@hedgewizard.net

    Copy & paste the code below to embed this comment.
  37. I had been looking for something similiar for quite a while. As more design orientated myself, as my JS skills are limited, having a footer placed in such a manner helps the look of the site, but yes it is a headache.

    Just a comment on my issue and how I resolved it for people who may come across it themselves. My content is not at the edge, it is offset by using the position absolute, and a left and top value. This posed a major issue with the script as it would obviously not see this and the footer would go over the text. If you defined a top value it would make the footer vanish completely. I tried using margins, margin-top would cause an issue too. I used   (no break white space) to position it properly, which is bad obviously as a web designer! But I managed to come up with a solution, so for anyone with the same issue.. just change the following line in the function setFooter(); … var contentHeight = document.getElementById(‘content’).offsetHeight + document.getElementById(‘content’).offsetTop; … it adds the offsetTop and pronto works. Sorry post is a bit long!

    Thanks again for such a great solution to a simple problem!

    Copy & paste the code below to embed this comment.
  38. Great article, but one slight glitch, when you resize the text.

    Especially bad in Mozilla and Netscape, no scroll bar, when you resize the text, no way you can see footer when it moves down the page.

    Copy & paste the code below to embed this comment.
  39. hi,
    i’m not programmer at all, just designer,
    my problem is simple as possible:
    i have 2 tables : the first must be center dead, the second must be footer all time and disapear behind the centering table if height not enought…
    the page here :
    www.portfolio360vr.com/folios/test8.htm

    checked with
    http://www.danvine.com/icapture/
    and “ie capture” on same page..
    seems good behaviors on all browser except opera…

    i’ve tried way of table inside of table(old method) and your css+jscript but my knowledges with programming is very poor and if someone could help me , peep a look inside the source page to see what’s wrong with opera wich keep the footer as header

    thanxs for help very much appreciated

    Copy & paste the code below to embed this comment.