Exploring Footers

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.

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.