Exploring Footers

by
Published in CSS, HTML, JavaScript, Layout & Grids

One of the nice things about old-school table layout methods is that they enable you to create liquid page designs very easily. If you want to center content vertically or stick a footer to the bottom of the browser window, all you have to do is include one main table with a height of 100% and position elements inside of it.

Article Continues Below
Article Continues Below

With web standards, you can’t do this anymore. The table height property is deprecated in XHTML, and web standards recommend that you avoid using tables for page layout. To divide structural markup from presentation, CSS is the way to go — but if you want to use CSS for vertical positioning, you face a lack of support from some mainstream browsers.

This article explores the ways you can position footers using web standards, although the same techniques may be used to vertically position other elements. Many designs contain a footer that is positioned directly under the content area, unless the content and the footer together don’t fill the window entirely. In this case, the footer will be positioned at the bottom of the browser window.

Absolute positioning in a relative box#section2

So how do you position a footer with CSS? Picture a container with a fixed width. The container consists of a variable amount of content followed by a footer with a fixed height. When you add content, the height of the container grows; when you subtract content, it shrinks.

If you create a relatively positioned container and nest a content block, by default it will follow the normal flow inside the container, expanding or diminishing the height of its parent with its content. One of the strengths of relative positioning is that you can nest absolute-positioned elements inside of them. This makes it possible to nest a footer block and position it absolutely to “stick” at the bottom of the container. Your markup code looks like this:

<div id="container">
    <div id="content">...</div>
    <div id="footer">...</div>
</div>

And your style rules look like:

#container {
    position: relative;
 }#footer {
    position: absolute;
    bottom: 0;
 }

However, absolutely positioned elements are taken out of the normal flow and are placed over normal flowed elements. Because you don’t want your footer to overlap your content, you can add some padding to the bottom of the content block to compensate the footer’s height. You may view the result in example 1.

This step doesn’t work correctly in Internet Explorer 5.x/Windows. For these browsers an absolutely positioned child loses its position when the height of the parent element is not set. We will focus on the container’s height in the next step.

Connecting the container to the viewport#section3

So far, the height of the container is determined by the height of the content block, which is cool if there is enough content to fill the height of the browser window (also called the viewport). If this is not the case you want the footer to stick to the bottom of the browser window.

In CSS, this is an easy effect to create. If you give the container a minimum height of 100% with the min-height attribute, the minimum height of the container is equal to the height of its parent element: the body element. You specify that the height of the body element must equal the height of the viewport by setting the height of both the body and the html element to 100%:

html, body {
    height: 100%;
}
#container {
    position: relative;
    min-height: 100%;
}

You may view the result in example 2. This is all the code that should be needed to position a footer with CSS. Unfortunately this technique doesn’t work for Internet Explorer and Safari because of their lack of support for the min-height attribute.

But wait a minute, the technique works in Internet Explorer 6, even though that browser doesn’t support the min-height attribute (at least not according to the W3C specs).

It appears that if you set the height of the body element to 100%, in Internet Explorer 6 (in Standards mode) the container inherits its parent’s height (in our case the viewport’s height). Internet Explorer’s wrong implementation of the default visible value of the overflow attribute (on Windows only) causes our container to stretch up until its content fits in it, instead of maintaining a fixed 100% viewport height. These two together effectively simulate a min-height attribute.

Working around some limitations#section4

Internet Explorer 5.x/Windows always renders a web page in quirks mode. If you set a block element’s height to 100%, in quirks mode, the element uses the height of the viewport. Now if you could only declare a height of 100% for the container, this would fix the problem from the first example and make the technique work in IE5/Windows too. 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.

Using the box model hack, you can pass style rules to Internet Explorer 5.x/Windows only. You define the height of the container as follows:

#container {
    position: relative;
    min-height: 100%;
    height: 100%;
    voice-family: ""}"";
    voice-family: inherit;
    height: auto;
 }
 
html>body #container {
    height: auto;
 }

You may view the result in example 3. Example 3 doesn’t work in Internet Explorer 5.x/Mac and Safari, but it degrades gracefully; the footer will always be placed at the bottom of the content block.

Microsoft has stopped developing Internet Explorer on the Mac. I hope Apple’s Safari will support the min-height attribute soon. Meanwhile, what if you want to support Safari or Internet Explorer 5/Mac (or, most likely, both)? Are there any other alternatives? Funny you should ask.

What about the W3C DOM cavalry?#section5

Unfortunately, the W3C did not create any specifications on how to calculate the height of both browser window or document elements. They probably should have; standards exist so browser makers don’t have to create these specifications themselves. In this case browser makers were forced to create their own proprietary attributes.

So if you want to use scripting to position elements relative to the browser window, you are condemned to use non-standards-compliant proprietary techniques. The question is: Is it a bad practice to use these techniques in an area where there is a lack of standards?

In my opinion, this depends on how internally consistent these techniques are. If they are able to fill in the gaps of web standards and are used in a consistent way, I think they should be treated the same way as W3C specifications.

If you have the choice between a pure CSS solution and one that combines CSS and scripting, it is wise to use CSS only. In principle, CSS should take care of style and JavaScript of behavior. However especially in the cases where standards are supported poorly or seem to be insufficient, using the DOM and JavaScript can enrich the way you style your web documents. In this case, a combination of CSS and scripting techniques can be justified.

Using proprietary DOM to calculate heights#section6

It seems that browser makers were watching each other when they created their proprietary height specifications. As a result, proprietary DOM offers us the possibility to calculate the height of the browser window and document elements. Although several browsers use different objects and properties, the following script will retrieve the window height of almost any modern browser correctly:

function getWindowHeight() {
  var windowHeight=0;
  if (typeof(window.innerHeight)=='number') {
    windowHeight=window.innerHeight;
  }
  else {
    if (document.documentElement&&
      document.documentElement.clientHeight) {
        windowHeight=
          document.documentElement.clientHeight;
    }
    else {
      if (document.body&&document;.body.clientHeight) {
        windowHeight=document.body.clientHeight;
      }
    }
  }
  return windowHeight;
}

The window.innerHeight property returns the window height for most modern browsers except Internet Explorer. Internet Explorer 6 in Standards mode uses document.documentElement.clientHeight to achieve the same. The document.body.clientHeight property returns the window height for Internet Explorer 4+ browsers.

With document.getElementById(elementId).offsetHeight you can retrieve the height of any element for all modern browsers.

Now you can calculate the height of the browser window and your document’s elements, you are able write a function to position your footer correctly.

Using the W3C DOM to position the footer#section7

Just because you use JavaScript, this doesn’t mean you cannot use CSS for positioning elements. The W3C DOM offers an interface to use style rules with JavaScript. This means you can describe JavaScript as if it were CSS, with the addition of some conditional logic and a few height calculations.

Start by marking up your page in its most simplified form, creating a content and a footer block:

<div id="content">...</div>
<div id="footer">...</div>

If the height of the content block and the footer together is bigger than the height of the viewport, the footer should follow the normal flow (static positioning). If this is not the case, your script has to position the footer at the bottom of the window. With relative positioning, you can move the footer downwards relative to its position in the current flow (you can also use absolute positioning to achieve this). Sounds like CSS, doesn’t it?

The following function describes what we just defined:

function setFooter() {
  if (document.getElementById) {
    var windowHeight=getWindowHeight();
    if (windowHeight>0) {
      var contentHeight=
        document.getElementById('content').offsetHeight;
      var footerElement= 
        document.getElementById('footer');
      var footerHeight=footerElement.offsetHeight;
      if (windowHeight-(contentHeight+footerHeight)>=0) {
        footerElement.style.position='relative';
        footerElement.style.top=(windowHeight-
          (contentHeight+footerHeight))+'px';
      }
      else {
        footerElement.style.position='static';
      }
    }
  }
}

Dissecting the setFooter() function#section8

The setFooter() function first retrieves the height of the viewport and stores it in the windowHeight variable:

var windowHeight = getWindowHeight();

Second it retrieves the height of the content element and the footer element:

var contentHeight=
  document.getElementById(‘content’).offsetHeight;
var footerElement=document.getElementById(‘footer’);
var footerHeight=footerElement.offsetHeight;

Next it decides if the height of the window is larger than the combined height of the content and footer:

if (windowHeight-(contentHeight+footerHeight)>=0)

If this is the case, it repositions the footer relative (to its place in the normal flow) at the bottom of the page:

footerElement.style.position=‘relative’;
footerElement.style.top=
  (windowHeight-(contentHeight+footerHeight))+‘px’;

If they do fill the height of the window, the element is repositioned static to follow the normal flow:

footerElement.style.position='static';

To make everything work include the getWindowHeight() function in your script and add two functions that call your setFooter() function at the moment our web document is loaded or resized:

window.onload = function() {
  setFooter();
}
window.onresize = function() {
  setFooter();
}

You may view the finished version in example 4. However, there is one little hiccup. Safari is unable to position an element relative (or absolute) when the onload function is called. To work around this issue, add the following style rule:

#footer {
  position: relative;
}

The technique works in all modern browsers without using hacks, a temporary advantage over the CSS only technique. If a browser cannot calculate one of the heights, if JavaScript is switched off or if a browser doesn’t support JavaScript, the footer will just follow the normal flow. As you can see, structural mark-up and style are still separated and your marked-up code didn’t get more complicated. Maybe scripting tends to be more verbose than CSS, but not in a significant way.

Reusing the concept#section9

Just by making minor changes in the CSS logic, you have multiple ways to position your footer. You can use relative-positioned elements only (example 5) or absolute positioning (example 6).

The scripting technique can easily be reused for other vertical positioning tasks. Picture that you want to center a content block vertically in your browser window using CSS only. You could also have achieved this effect by reusing the scripting technique. You may view the result in example 7.

119 Reader Comments

  1. Nice trick.

    I cannot see it as useful to have a footer at the bottom of the browser window. If a page is short on content, and someone has their browser taller than the content height, then the footer seperates from the content.

    Seems to me a lot of trouble for very little benefit.

    I can see it as useful for the dead center placement, although again, there seems to be a lot of scripting involved unlike the other method mentioned, which is 100% CSS.

  4. If you’ve ever had a client ask “why is the footer in the middle of the page instead of at the bottom?” this will be helpful.

    The non Javascript version works nicely when printing in IE6 as well. This is something else clients often get particular about.

  5. I know it is in the examples, but the article does not mention that you need to give the body style a padding and margin of 0. If you don’t the footer will appear just off the bottom of the browser.

    e.g.

  6. You anti-table zealots crack me up. Don’t get me wrong, the article was in depth and fascinating. But a whole lot of energy is being thrown at solving a problem that doesn’t need solving. A simple table element with a few attributes performs this task nicely.

  8. A table is going to linearize in only one way. By using absolute positioning, I can move code around in pages so that screen readers/text browsers aren’t confronted with a barrage of navigation at the beginning of every page.

    It’s not the only reason to use positioning over tables, but it’s certainly a good one.

  9. Brian said:

    “You anti-table zealots crack me up. Don’t get me wrong, the article was in depth and fascinating. But a whole lot of energy is being thrown at solving a problem that doesn’t need solving. A simple table element with a few attributes performs this task nicely.”

    There may be cases, even today, where you need tables for layout. The article is not based in zealotry; it does not advocate modern methods over old-school ones. It could even be viewed as an implicit critique of CSS for leaving out certain basics designers need, such as the ability to reliably position layout elements with respect to the viewport.

    So if it’s not for zealots, who is this article for? It’s for designers and developers who’ve made the decision that the site they’re creating would benefit from semantic markup and CSS layout, but who find that CSS resists an aspect of their layout. The article offers a solution that problem.

  10. There’s too much trickery involved in many of the new CSS techniques. It’s not that I don’t appreciate the efforts of these designers, but the workarounds are getting old. Every time I start to feel like I’ve got some kind of mastery of the concepts of CSS (like float!) browsers hit me in the face with a baseball bat.

  11. This article is pretty cool at addressing a cosmetic need on our web site. It works mostly but I had to add two extra div nestings. I’m really loosing interest in CSS. I try to keep my structural code as simple as possilbe but then I have to keep adding more layers of complexity to what should be a simple stack of blocks. Cuz you gotta wrap the blocks in containers and then the containers have to be in containers and then most likely those containers need to be in meta containers, usually with only one or two properties per a div. Seems like a waste and not much of an improvement. Maybe someone could write about the theory behind div nesting. At this point its getting silly.

  14. that example doesn’t work in IE mac or safari. the footer stays in the middle of the screen with short content.

  15. Brian said:

    “You anti-table zealots crack me up… …A simple table element with a few attributes performs this task nicely.”

    If you’re refering to height=”100%”, that doesn’t work in a modern browser. It maybe be dependant on doctype, but still. Even in 4.01 trans, it does not work.

    Now what?

  16. It does seem that many of the workarounds would be unnecessary if inline-blocks were standard (especially as they work for 95% of users – i.e. IE).

    The semantics are simple – fill the box like a block box; position it like a replaced element (e.g. IMG). Ironically, using OBJECT with type text/html *data* works!

  17. I did this about a year ago and can’t remember the exact approach, but I think I just made a footer div with fixed position at 35px in height and set the margin-top to -35px. Of course you’ll need to pad the bottom of the content area so the footer doesn’t overlap, but that’s trivial.

    I didn’t ever deploy it and so only tested it in a few browsers but it did appear to function just fine. Any thoughts?

  19. I agree with some other comments that a lot of these newer techniques are going to far around the pylon. I love JavaScript, I love modern methods. But this is a lot of code to add to my already growing (and groaning) stylesheets.

    And I like playing with the DOM, but I don’t want to have to mess with the JS code to set a footer, it goes against what I think JS is for. And I’m a JS nut.

    I’m redoing a site right now where we could use this, but I won’t. I’ll let the footer float up when it has to, and I don’t really see any problem with that at all – it’s certainly not worth adding all the code for.

    Even so, nicely written and good job figuring it out.

    Tom

  20. Thank you all for sharing your opinions and discussing this article.

    Unfortunately I’m on a short ski trip in Cervina (Italy) this weekend, right now I’m sitting behind a computer in an internet cafe to follow the discussion. So it might be I have to come back on some issues mentioned in the beginning of next week.

    Fabian: I tested the examples in Opera 7.1 on WINXP and WIN2000. Could you please post in which Opera version on which OS you encountered the problem?

    Anne: I quickly ran through the code of http://steve.pugh.net/test/test57.html and saw it uses the min-height attribute. In fact it resembles the CSS method described in this article, with the main difference it uses absolute positioning in an absolute box, instead of absolute positioning in a relative box.

    I agree that CSS can give some headaches especially if you are a novice CSS designer. Still I don’t think the CSS method is that hard to implement if you have a little bit more experience with CSS.

    I see the JavaScript/DOM method as a good temporary solution. It looks complicated, but you can just copy it over an reuse it any time you like.

  21. Scripts for layout? I identify with the need to solve these problems, but scripts! Too hard to maintain.

  22. This is a nice article. I believe that the height attribute was deprecated way before XHTML and in my world the table height=”100%” is being used by my university to deliver this: http://www.brookes.ac.uk — It was the brand you see. It had to be delivered like that. I hated that it was done like that, and my web responsibilty is for my school / faculty, so I did this: http://ah.brookes.ac.uk

    My solution is too complicated for this discussion and the CSS hacking for different browser support deserves its own article. One useful additional trick is to use the ‘Conditional Comments’ supported by IE to deliver specific ‘divs’ to particular versions of that browser.

  23. I noticed an interesting quirk in examples 4 and 5 with Mozilla 1.4.1 on Fedora Core 1. After resizing the browser window to full size, everything looks fine. However, when I resize it to normal size again, there is a horizontal scrollbar sized gap between the bottom of the footer and the bottom of the viewable area in the browser.

  24. I fail to see the need for the box model hack in your previous example. Since every browser that understands min-height understands the parent>child rule, just min-height there, like so:

    html, body {
    height: 100%;
    }
    #container {
    height: 100%;
    }
    html>body #container {
    height: auto;
    min-height: 100%;
    }

    It’s much easier to comprehend without the hack in there.

  25. When viewing any of the examples in Firebird for windows the footer doesnt not cover the entire width of the page…is this intentional? I noticed the element at the top does cover the entire width of the page.

  26. Just put a :

    padding-left:1px;

    at the Content because if the width a too small the content disappear (same for “The Daily Report”) in Mozilla.

  28. Is there any browser this might fail in?

    var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

  29. Please don’t lump good browsers in with Explorer. That bowser (oops) is far and away the reason that people resist css positioning. Opera and Gecko are superb css browsers and a joy to write for, but the fat man at the table has to ruin it for everybody. Yesterday I discovered an IE bug that causes left padding in one box to create negative left padding in another box, sucking the text to oblivion!

    This is not the behavior to inspire confidence, and there is no sign that IE will be redesigned so let’s resign ourselves to many more years of headaches. Thanks, Bill…

  30. http://www.pmob.co.uk/temp/3colfixedtest_4.htm

    The example fails in Safari 1.0: the footer is not positioned at the bottom of the browser screen, but at the end of the content. The point of this article is to position the footer at the bottom in case the content is not long enough to push it to the bottom of the screen.

    IE specific CSS: a future article about this phenomenon would be appreciated. I don’t understand how it works and what the possible drawbacks on other browsers are, since I’m a Mac person and never work with IE6 (except for testing on an old win98 machine). A pointer to a good article would also be fine.

  31. While many others are questioning the usefulness of this code, I think it offers quite a few different solutions to a problem I’ve been looking at for quite some time now: vertical centering. I know you suggested this at the very bottom of your article, but I thought I would mention it again for those who didn’t exactly find your article beneficial. Thanks for this, Bobby.

  32. Minor nitpick:

    JavaScript has “else if”, no need to use “else { if” all the time.

  33. I thought the real jewel in this script was the vertical centering example… combine with css and you can postion just about anything V and H dynamically. Don’t get hung up on the footer thing, the title should be ‘Vertical Positioning with DOM/CSS” because that is what this really is.

    Also, to change the height of your content div relative to window size, add a variable to your setContent function. Change the Math a little to tweak it where you like it. It is set close to 16:9 widescreen now. Of course if content is longer it will stretch, but this always helps w/ my layouts.

    Good article… You almost have me putting js in my sites again (almost!)

    function setContent() {
    if (document.getElementById) {
    var windowHeight = getWindowHeight();
    if (windowHeight > 0) {
    var contentElement = document.getElementById(‘content’);

    var contentHeight = contentElement.offsetHeight;

    if (windowHeight – contentHeight > 0) {
    contentElement.style.position = ‘relative’;
    var newHeight = (windowHeight / 16 * 12);
    contentElement.style.height = (windowHeight / 16 * 12) + ‘px’;
    contentElement.style.top = ((windowHeight / 2) – (newHeight / 2)) + ‘px’;

    }
    else {
    contentElement.style.position = ‘static’;
    }
    }
    }
    }

  35. sorry for minor grammatical errors.

    There is invariably a problem with css – a problem that doesn’t involve the programmers or webmasters who take the (valuable) pain to work on css and provide solutions: and the problem is that the solutions always involve a considerable amount of problems and are rarely definitive.

    The mere fact we must sponsor something like a “hack model” (the name tells it all) for css rules is in itself not only a nightmare, but I am also dubious we should let such things sneak into our codes wilfully. A mistake in a code is normal, but convoluted solutions sponsored and encouraged is another thing.

    You script following the W3C standards and you find that a rule works on IE6 but not on IE5 yet wait on IE5 for Win ok but for mac not yet and oh well NS4 don’t even mention it, NS5 ok but not always, safari I hope you work for a big firm where you can afford the _luxury_ of testing your pages on 3 different operative systems, then Firebird (or was it Phoenix…?) which doesn’t scroll, then Opera, yes but from 7.2 onward because before 7 it didn’t work, so well this rule, put a hack here and then doesn’t work put a hack there and then works here but wait let me boot my friend’s mac and bring the diskette, wait it doesn’t work there, ok this hack but now doesn’t work where it previously worked, they released a new version of Opera let’s hurry, wait have you tried that new browser, add this line, remove that, wait a minute…

    Are we being payed for doing this? A few would answer we are.

    All of this in the face of what is not only called “standards” but even “recommended”.
    On what basis we recommend?
    On what basis we deprecate?

    The W3C deprecates: but why?
    Is that truly a necessary part of its work?

    It seems now it has deprectaed name attributes: have server side languages taken into account while we deprecate the name attributes?

    In what world do we live when we script?

    Now we discover tables are not “encouraged” – yet solutions that don’t work are.

    I can be wrong, but if one wants to obey to deprecations and standards and recommendations, you have to make choices: either you accept only a limited amount(though majority of users) of browsers, or you make up your mind to make impossible css rules crammed with hacks that wouldn’t eventually work in the expected way on some platform/browser combination anyway.

    Deprecate, deprecate all the while… what do we get in change? I would say that deprecations are untimely – to say the least.
    We work with real browsers, not with Star Trek.

    Long time ago we were struggling with NS4 and the notorious “browser sniffing”. We hoped things had moved on, we now discover that we’re back to those times, with a different name.

    W3C should reccomend and deprecate less. And we ought to make choices because, realistically, in this mess we JUST can’t make everybody happy! And this should be acknowledged and said frankly & openly.

    It is not a matter of being a bad webmaster: it is a matter that tables are useful, and deprectaing them today to leave us with box hacks means living on a different level than the one we poor webmasters fight every day.

  36. My apologies for creating a backlog, as I mentioned before I was on a short holiday last weekend. Hereby my answers on the open questions and points raised in this discussion:

    Martin Brown: http://www.alistapart.com/discuss/footers/1/#c6534
    Thanks for noting. Of course for the implementation of any CSS layout you need to control the (default) margins and padding in your design. But you are correct, if you want to avoid a vertical scrollbar you should at least use:

    body { margin: 0px; }

    Fabian: http://www.alistapart.com/discuss/footers/2/#c6542
    I tested all examples in Opera 7.02/WIN2K, 7.23/WIN2K, 7.02/WINXP and 7.10/WINXP, but couldn’t find any scrolling issues.

    However I found a small Opera bug for examples 2 and 3. Somehow it renders some space underneat the footer when a page is initially loaded, on refresh everything works fine again.

    I have to disappoint the people that thought they had found a CSS solution that works for all browsers:
    Anne: http://www.alistapart.com/discuss/footers/2/#c6544
    Terry: http://www.alistapart.com/discuss/footers/3/#c6570

    As other people already have noted these examples don’t work correctly in Safari and IE5/Mac. This is caused by the lack of support for the min-height attribute as described in the article.

    David Graham: http://www.alistapart.com/discuss/footers/2/#c6550
    The article discusses what happens if there is not enough content and footer to fill your page and you want the footer to stick to the bottom of it. In your description the footer always stays at the bottom of the content area. You still need to use min-height to achieve the desired effect.

    Vinnie Garcia: http://www.alistapart.com/discuss/footers/3/#c6564
    I expect that in this case child selectors will produce the same effect as the box model hack. There are more ways that lead to Rome, I guess it is all a matter of taste. However I still prefer the box model hack over using child selectors. First it is more transparent. If I read a style sheet and find the box model hack, I know why it is there for and so will my collegues. If in some stage I would want to remove IE5 specific code (let’s hope it will get redundant one day), I can easily remove it.

    If you look at the min-height and overflow attributes, I expect that the next version of IE will either act the same as IE6 or will be fully standards compliant. In the case you use child selectors, there is a small risk that the technique will break if IE7 has a standards compliant min-height and overflow implementation, but still has no sense of child selectors. I don’t expect that this will happen, but then again, you never know.

    Phillip: http://www.alistapart.com/discuss/footers/3/#c6571
    Good suggestion. I guess you propose something like:
    function getWindowHeight() {
    var windowHeight = 0;
    if (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight) {
    windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    }
    return windowHeight;
    }

    Works in all browsers I tested in and is a little bit less verbose, so I think this can be regarded as a small improvement of the technique. Anybody with a different opinion?

    Dave: http://www.alistapart.com/discuss/footers/3/#c6565
    The footer doesn’t not cover the entire width of the page. This is done on purpose, so you can see that the footer overlaps the bottom padding of the content box correctly in example 1-3, and that they don’t overlap for examples 4-6, where the footer is placed directly under the content area.

    Sven Neuhaus: http://www.alistapart.com/discuss/footers/4/#c6583
    You’re right, another small point of improvement making code more legible:
    function getWindowHeight() {
    var windowHeight = 0;
    if (typeof(window.innerHeight) == ‘number’) {
    windowHeight = window.innerHeight;
    }
    else if (document.documentElement && document.documentElement.clientHeight) {
    windowHeight = document.documentElement.clientHeight;
    }
    else if (document.body && document.body.clientHeight) {
    windowHeight = document.body.clientHeight;
    }
    return windowHeight;
    }

  37. …when possible. I, like many who prbably visit here, work professionally at this. The usual markup, css, java, php, xml, whatever.

    And yes, having to support a dozen or so broken and buggy browsers is part of the joy(sarcasm, of course!), esp. when some paying client uses a particularly bad browser.

    But, for my own pursuits, I can do as I please. My favorite tactic, upon detecting an inferior browser is to politely inform the visitor, “Did you know your browser sucks? This is why the pages you are viewing may appear broken. Follow along, and I’ll show you a Brave New World beyond the gray, lifeless one you’ve been wandering in.”

    Arrogant? Perhaps so, but most people don’t know better and never will if they aren’t told so. Would you let a friend walk around with the zipper of his trousers open? Unless you were a cruel joker, of course not. Therefore, I take it as my noble duty to let people see the light. The potential of what the web is, and more importantly, could be if we did not blindly accept the third-rate crap foisted upon us by corporate interests who only care for market share, or developers who just write poor code.

  38. personnaly i have bug in ie mac when i change the size of the page and don’t reload it. Maybe a reload script on change window size is necessary to prevent it

  40. irvin asked:

    >>It seems many have been deleted. Is that so?

    Nope. No on-topic post has been deleted, aside from a duplicate message that was accidentally posted twice. We figured we figured once once was enough was enough.

  42. I think it is sometimes a valid design decision to fix the footer to the bottom of the viewport. I remember a few instances when I really wanted that particular look. I usually solved “the fixed footer” problem with frames, to tell you the truth.

    Since converting to XHTML and CSS design, I prefer to work in pure CSS – hack-free, absolute positioning free, and Javascript-free, so I personally would not use the author’s solution.

  43. Quoth Apartness: It could even be viewed as an implicit critique of CSS for leaving out certain basics designers need, such as the ability to reliably position layout elements with respect to the viewport.

    The recommendaton *does* include a way to reliably position layout elements WRT the viewport: position: fixed. IE/Win just doesn’t grok it (and IE/Mac has problems as well).

    This from the company that patented stylesheets….

  44. After spending more time trying to get my layouts to display just right than on actual design and editing for one too many projects, I have decided to leave these techniques up to my personal site.

    I’ve gone back to tables out of convenience. What used to take me all day to get a layout functioning with CSS (plus various days after, seeing the sites in various browsers) in the mainstream browsers, I now spend maybe 2 hours from .PSD to .HTML.

    All the practice though has sure fine tuned my skills to due some fairly advanced work through “hybrid” designs.

    My boss is much happier too, as our audience does not see the code, they want the pretty pictures.

  45. My two cents.

    Code the header and the footer in css. Code the body in a table. For me, it has been the best balance I have been able to achieve. Using this method, I can still have layers in the header and footer overlap the content area thanks to the magic of css. But now, the content section moves the way I want it to move every time, without worries or hacks.

  46. Talking about fixed positioning: http://www.alistapart.com/discuss/footers/5/#c6621

    Recently I had to find a solution for a design where the client used a frame layout and I had to integrate and style an application that didn’t use frames. The design included a footer (containing branding and main navigation) that always stays visible at the bottom of the screen. Should be a piece of cake for CSS fixed positioning, but like mentioned before this is not supported by Internet Explorer.

    Luckily the CSS/DOM/JavaScript technique as described in the article came to the rescue. By adjusting the setFooter() function and adding a few lines of CSS code I was able to create a layout that looks like it is built using frames:

    http://www.bobbyvandersluis.com/articles/ala_footer_variation2.html

  48. Don`t see any benefit from this script cause it`ll give me no advantage. May be better to0 write a table in 1 minute and to be sure that ot eorks fine???Isnn`t it? If it`s short,cross-platforminh and simle, why not to use the table….only because not to an old chool??

  49. Typical to any ALA article, about a third of the posts, if not more, boil down to “I could do better” elitisms of various flavors. Why bother? If you can do better, then just do better. Or write your own ALA article and submit it. I try to view the entire web design community as just that, a community. We earn our livelihoods (or at least a part of them) by doing things very few others understand; least of all, the people who visit our sites or the people who may or may not bother to pay us for our work. Especially for those of us who work in smaller companies where we really are the only “web guy”, feelings of isolation can really set in. I think it’s great that there are places I can go online where I can read articles about and discuss topics which I am passionate about; where I can find people who understand the esoterica of what it is we do and won’t just stare at me blankly if I start talking about CSS, div tags, JavaScript, or even just plain ol’ HTML. It really depresses me that people are willing to share the various ways they approach common or sometimes not so common problems and the solutions they have found that work for them. A lot of work goes into these articles and even into some of the discussion posts; and all too often I see them dismissed with nippy little snide comments. At the very least, have the professional courtesy to say “thanks for sharing” before you present your solution. And also keep in mind that it is just your solution, and the fact that it’s yours doesn’t make it automatically better. So drop the elitist attitudes.

    That being said, this is one of the very few areas where still using tables for layout doesn’t bother me. CSS, or at least widely supported CSS doesn’t allow for an quick and easy way to do this. So divide the page up into 2 table cells, put the footer into the bottom cell and everything else into the top cell. This still technically allows for the fluid redesigns offered by CSS because it’s a footer, it’ll always be at the bottom. Everything else in the top table cell is just as free to be manipulated and styled via CSS as ever. This is in no way meant to invalidate the solutions presented in the article. 😉

    As for the W3C and their recommendations…there is a need for web standards. Once they are properly supported, the world will be a much happier and better place for web designers. IE is the only browser that’s playing catch up at this point, and the good news is, they are playing catch up. That does mean that the vast majority of web surfers are using non-standards compliant software. As designers, we each make the choice to follow the standards that will truly become standard over the next 5-7 years today, or let our actions be dictated by the masses and the software monopoly. By the weighted way in which I worded that, you can pretty easily guess how I choose. But it’s a choice and it’s your power to make that choice. Make it, debate it, but don’t be an ass about it.

    As for tiring of all the hacks, amen! But, if you find yourself having to do hack after hack after hack, you may need to take a step back and examine your design practices. I usually find a simpler way if I take some time and think it over when I find the code getting overwhelming…not always, but usually. =)

    This went way longer than I meant for it to. I’ll shut up now. Thanks for reading if you managed to make it this far.

  51. 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”.

  52. 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.

  53. 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.

  54. 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.

  55. 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.

  56. 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!

  58. some friends and i were talking about jS that would tell us the size of user browsers for positioning. this answers our questions…

  60. 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.

  61. “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(tm) 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?

  63. 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.

  66. 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?

  67. 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.

  70. 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.

  71. 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.

  72. 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.

  74. 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.

  75. 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.

  76. 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.

  77. 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)

  78. 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!!

  80. 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.

  81. 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.

  82. 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.

  83. 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!

  84. 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.

  85. 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.

  86. 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!

  87. 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.

  88. 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.

  89. I visited using IE 6 for Windows, so I don’t know, things might not work so smoothly after all. Beats me.

  90. 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.

  91. 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!

  93. 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.

  95. 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.

  96. 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.

  97. 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

    vertically and Internet Explorer keeps f&/%n everything up. Oh well, what’s new?

  98. 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.

  99. 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.

  100. 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.

  101. 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.

  102. 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.

  103. 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.

  105. 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.

  106. 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.

  107. 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?

  108. 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 tag

  109. 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

  112. 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

  113. When trying to print it only prints the viewport contents and not the entire page. Is there a way to fix this?

  114. Will, you can customize your print-outs by using a print style sheet.

    With something like:

    you should be king again.

  117. 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 &nbsp (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!

  118. 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.

  119. 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 :
    http://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

Got something to say?

We have turned off comments, but you can see what folks had to say before we did so.

More from ALA