Exploring Footers

by Bobby van der Sluis

119 Reader Comments

Back to the Article
  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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.
  12. 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.
  13. 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.
  14. 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.
  15. MS IE is big piece of …. :-)

    Copy & paste the code below to embed this comment.
  16. 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.
  17. 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.
  18. 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.
  19. 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.