Exploring Footers

by Bobby van der Sluis

119 Reader Comments

Back to the Article
  1. Every time I try to walk away, something makes me turn around and say…
    That there are reasons we post this. APA and I are not “haters”. We are speaking our mind. It’s like I said, about ALA being the idiot magnet. If I speak my mind about something, and it disagrees with everyone else here at ALA, my comments get deleted by Hitler , er Apartness and I start this rampage about free speech. Not because I’m a hell-raiser (well not entirely), but because it’s my right.
    And yeah, I could do better. And I have. Twice. I published a JS version of the hideous Accesskeys article at the now discontinued jstimes.vze.com. And I am almost finished with a DHTML menu (http://geocities.com/dc_sfhe/redesign.html) that makes the hacky excuse for a “Suckerfish” menu (boy did it suck) look like crap. No offense, but let me give advice: don’t base DHTML menus on CSS hacks.
    So this is the end of the “flames”, even though it’s considered flaming to disagree with “the man”.

    Copy & paste the code below to embed this comment.
  2. And I’m not saying it’s uncool to disagree.  The web would be a pretty boring place if we all agreed on design and coding principles.  I would personally try to avoid emotionally charged words like “idiot” and “suck”, but then again, I did refer to Microsoft earlier as a software monopoly, which is up for debate, so I’m just as guilty as you in that regaurd.  All I’m really saying is, when you disagree, have the courtesy, professionalism, and common respect for you fellow human beings to not be an asshole.  Unfortunately that sort of common sense behaviour is UNcommon enough to cause me to avoid reading the comments section of most ALA articles, and behaviour better suited for middle school playgronds is common enough to remind me why I usually don’t bother on the rare occasion that I do.

    Copy & paste the code below to embed this comment.
  3. All I have to say is that if you want paper, go PDF, otherwise, lose the footer. It’s a concept that came along with paper.

    The article explains its solutions nicely.

    As far as the poster about tables: when templating the site using php, it’s nice not to have to worry which table you’re in when calling each function.

    Copy & paste the code below to embed this comment.
  4. That I hear “Middle School Playground Talk” every day. That’s because I’m 14 (which makes me the youngest web developer). So I have an excuse. That’s why I use suck so much. There’s nothing wrong with it anyway. Don’t bottle up emotions, like Ned Flanders.

    Copy & paste the code below to embed this comment.
  5. because you’re not letting us forget.

    You’re not being constructive in your criticism; you’re just being a junior high school kid. You rip the Suckerfish dropdowns, but the ones on your home page don’t work correctly in IE6—90% of all web browsers in use right now. And what happens when I turn off JavaScript? Are you going to block me from viewing your site completely?

    You need to look at these articles as a scientist, not as a junior high school kid. Some of this stuff is just pure experiementation. Some of it is genius. And some of it, honestly, leads down a dead-end street. You take what you like, critique what you don’t like, and leave the rest. It’s just like reading a scientific journal, except that this isn’t JAMA or the Annuals of Psychology and focused purely on medicine or psychology (respectively), it’s focusing on CSS and The New Code. Coming in here and saying “This idea doesn’t work” or “I don’t see what you’re getting at” is reasonable. “This sucks” or “tables R00L all else is the SUX0R” isn’t reasonable.

    You’re the type who’d walk into Henry Ford’s workshop and say the Model T sucks because it breaks down, so you ripped the engine off the front and put in a horse. We’re talking about the way forward, you’re talking about why we shouldn’t even bother.

    If you have something constructive to say, say it. But don’t come in here acting your age and ranting on while hiding behind your paper “free speech” shield. You want to talk hacks? I can explain all the table hacks we were doing five years ago, all hacks I’m more than happy to be rid of. Using a table to format was always a kludge, and even with the extreme pain that CSS subjects me to, I’m happy that I have another option that doesn’t involved double-nested tables of doom.

    A majority of the people who read and post on here are legally adults. Please strive to be more grown up than them.

    Copy & paste the code below to embed this comment.
  6. 1. Thank you for telling me about the IE bug. My IE was behaving very odd. I had a case of a virus.
    2. I never, ever said “tables R00L all else is the SUX0R”. In fact I steared clear of that whole “Tables for layout” argument.
    3. ALA isn’t leading people to go backwards? Look at the Flash Satay article. It sacrafices browser compatibility for standards. That’s really moving forward.
    4. If you turn off Javascript in my site, you’ll see the plain, regular menu in the sidebar. Read my article for details.
    5. ALA contradicts itself. “ALA is a serious webzine” I read. Then they published that Oz thing, comparing all this to prison. Very, very serious.
    6. ???
    7. Profit!

    Copy & paste the code below to embed this comment.
  7. ‘“ALA is a serious webzine” I read. Then they published that Oz thing, comparing all this to prison. Very, very serious.’

    Oh, come on. There’s always room for levity, even in science.
    http://www.improbable.com/

    Copy & paste the code below to embed this comment.
  8. some friends and i were talking about jS that would tell us the size of user browsers for positioning.  this answers our questions…

    Copy & paste the code below to embed this comment.
  9. You don’t need an entire script to do that, just read out self.screen.width|height to get the width or height of the users monitor.

    Copy & paste the code below to embed this comment.
  10. Just thought I’d let you know: even though I realize that examples 2 and 3 are not the final examples, I want to point out that any time I resize the windows, IE 5.2.3 for the Mac crashes. I am on Panther.

    Is anyone else experiencing that problem? However, 4, 5 and 6 examples do work properly, with footer at bottom of window, and don’t crash when resizing.

    Copy & paste the code below to embed this comment.
  11. “That’s because I’m 14 (which makes me the youngest web developer).”

    Nice. You ruined almost all of your credibility and showed off your big ego in one sentence. Do you know every web developer out there? A common mistake to think, surely. And while we’re at it, I’m 18. I know more about webdevelopment (and flash, but that’s besides the point)than everyone I have ever met. Ever. There are people who don’t know a single thing about webdesign and -development, yet hsve 3 children and still doesn’t know what kind of ‘thing’ CSS is.

    Age is irrelevant. If you want to say something that contradicts the article, you have to provide facts supporting it. If you can’t, then don’t say it.

    I learned a lot from ALA, a large part of that comes from the comments. They give you insight in the article, like insta-experience in a can with an easy-to-peal™ lip. I did not learn from a 2 page rant about something that has already been discussed, everywhere.

    And with that, I end my comment. Let the good content flow again, shall we?

    Copy & paste the code below to embed this comment.
  12. Don’t you know IE 5.2 Mac is a bug ridden crash prone piece of junk? See http://www.quirksmode.org for gory details.
    I detect a hint of jealousy from [m].

    Copy & paste the code below to embed this comment.
  13. If you just used tables, we wouldn’t have this problem: IE DOES support min-height on TDs. But oh well. That’s too easy. Too bad you’re standards and anti-table zealots.

    Copy & paste the code below to embed this comment.
  14. Just go away…

    Copy & paste the code below to embed this comment.
  15. I have a right to be here.

    Copy & paste the code below to embed this comment.
  16. And we have every right to inform you that we don’t much appreciate your self-righteous and senseless babbling about how you are the internet’s last true designer, or whatever it is you think yourself to be. You’re not that impressive if you want to know the truth. The rest of us here are concerned with intelligent discussion about the articles—sorry kiddo, “ALA SUCKS!” just doesn’t make the cut. So for the love of God, either pester some other people, or stay and make good use of your inherent communication skills by making some intelligent points once in a while. It’s not much to demand of you, is it?

    Copy & paste the code below to embed this comment.
  17. Dante-Cubed wrote
    >>>
    If you just used tables, we wouldn’t have this problem: IE DOES support min-height on TDs. But oh well. That’s too easy. Too bad you’re standards and anti-table zealots.
    <<<

    No-one’s saying that you absolutely can’t use tables. This particular article, however, says that “IF you absolutely don’t want to use tables, this is the reality you’ll have to face”. Really, Apartness said all that needed to be said in the first page of posts: “It could even be viewed as an implicit critique of CSS”.

    Now, which do you think is most useful: an article that says “Nah, CSS is too complicated; simply don’t bother with it!”, leaving the W3C to guess what designers need, or an article that says “THIS is what SHOULD be working, THIS is what you can do TODAY, and THIS is what still needs improving”?

    I’d like to remind you that up until this point, your comments on this article haven’t actually been about the article, but about ALA in general. Now, I DO think you have the right to make general comments about ALA in these threads. But don’t play the saint by saying that your comments are considered “flaming” just because people don’t agree with them.

    You have shown yourself capable of serious discussion, and you’ve made some valid points. It would be nice to see you keep that up. But on the last page of posts, you’re dismissing honest critiques, both on the article and on your posts, along the lines of “Jealous, huh?” or “Why are you even using that piece of shit browser?”. One could get the impression that YOU are the one who’s having trouble accepting different points of view.

    Copy & paste the code below to embed this comment.
  18. http://jezek2.advel.cz/css/footer.html (try to click on “schovat text”)
    http://vmalek.murphy.cz/victorias-vertical-centering-test-page.html

    Copy & paste the code below to embed this comment.
  19. It’s not very mature to not have backbone either…
    http://ile.ilxor.com

    Copy & paste the code below to embed this comment.
  20. I do have trouble accepting different points of view if they’re only there to spite people and/or they’re incredibly stupid. We web developers haven’t the time to worry about Standards Zealots, as PPK so rightly labled them. I have made DOM progress with my Select Master and the DCScript Browser.
    It’s people that won’t let me have creativity that make me post crap as such. I can create a really great website with lots of cool yet accessible and usable DOM Scripts and CSS, but on my site’s discussion forum I find that people from this very forum have posted rubbish about me not knowing anything about design because I don’t use Valid XHTML. This is why I am so mad and immature.

    Copy & paste the code below to embed this comment.
  21. Bobby van der Sluis wrote:

    “The table height property is deprecated in XHTML,”

    There was never a height attribute for the TABLE element in HTML (nor in RFC 1942). So it cannot be deprecated.

    Copy & paste the code below to embed this comment.
  22. Technically speaking you are right. I don’t think the W3C ever recommended a table height attribute in any of their specifications.

    However, the proprietary table height attribute was already existing and loads of designers and developers like myself were happily using it.

    Despite the request of a lot of people to include the table height attribute in the W3C specifications, the W3C specifically stated that the table height element was deprecated and shouldn’t be used anymore.

    As a result the browser makers took the attribute out of their specs. The table height attribute can only be used in quirks mode. The latest versions of Opera don’t even support the attribute in quirks mode anymore.

    Copy & paste the code below to embed this comment.
  23. Why was it deprecated”? Oh I get it…the W3C just did it for the sake of doing it…seriously why?

    Copy & paste the code below to embed this comment.
  24. The W3C didn’t think it made sense to add height in when a) it never was part of the spec to begin with and b) display attributes are part of CSS. So, why support something now you never supported in the first place, and why support it when your stated goal is to move display functions out of HTML?

    BTW, your dropdowns also break badly in Opera 7.

    Copy & paste the code below to embed this comment.
  25. It’s not the Javascript tha breaks, it’s the css. I don’t know why. I have no time to deal with these bug ridden pieces of junk. So the dropdown will now only work in Internet Explorer. I don’t like to do this, but it’s the only browser that can get it right, even though all I hear about is its CSS bugginess.

    Copy & paste the code below to embed this comment.
  26. Welcome to web design Dave.  While none of us like to design around bugs,  especially since certain browser developers are refusing to support the standards, these work arounds are necessary and needed.  But it is also about creativity…and making the medium do more than it it was supposed to.  If we had been content with html v.1, this page wouldn’t be here. 

    Excellent article, and thanks for the tip. Wish I’d seen it about 3 weeks ago when I was dealing with this issue.

    Copy & paste the code below to embed this comment.
  27. Well, I for one will stick with the “old-school” table positioning for now, at least until I can get the CSS positioning to actually WORK in my browsers (Opera7.23,IE6). So far, I haven’t been able to make any of your examples work in Opera:-( And that’s the point – why bother making super-new-and-cool CSS2++ designs, when a large number of users don’t really see the results? (my web sites’ stats show about 60% of IE 5.0 and 5.5 combined)

    Copy & paste the code below to embed this comment.
  28. AMEN Brian! What a rediculous waste of time. It’s like I want a Toyota but they don’t have exactly what I want so rather than check out Nissan, I’m gonna build my own car from scratch.

    Utterly worthless. When the standards people and browser people get their act together I will delve into CCS beyond text formatting.

    javascript functions to get a footer on a page..please!!

    Copy & paste the code below to embed this comment.
  29. Typo: CCS = CSS

    Copy & paste the code below to embed this comment.
  30. Hi,
    Quote from article:

    “Note that if you set the height of the container to 100%, in standards mode the footer will always stay at the bottom of the browser window.”

    Not true there is no need for any extra code or workarounds for ie5 or ie6 (pc) both will work fine with 100% as I have been using this for ages.

    The 100% container will reach to the bottom of the window or the bottom of the document if longer.

    Otherwise nice article.

    Copy & paste the code below to embed this comment.
  31. 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.
  32. 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.
  33. 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.
  34. 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.
  35. 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.
  36. 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.
  37. 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.
  38. 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.
  39. 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.
  40. 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.
  41. 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.
  42. 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.
  43. 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.
  44. Very useful article. I solved problem with the similar positioning on one my project. Thanks

    Copy & paste the code below to embed this comment.
  45. 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.
  46. 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.
  47. 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.
  48. 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.
  49. 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.
  50. 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.
  51. 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.
  52. 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.
  53. 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.
  54. 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.
  55. 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.
  56. 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.
  57. 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.
  58. 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.
  59. 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.
  60. 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.
  61. 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.
  62. 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.
  63. 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.
  64. 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.
  65. MS IE is big piece of …. :-)

    Copy & paste the code below to embed this comment.
  66. 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.
  67. 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.
  68. 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.
  69. 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.