The Man in Blue > footerStickAlt: A more robust method of positioning a footer. 29 August 2005 » footerStickAlt « Updated: 4:40PM, 29 August 2005 (See comment #6) Recently I've been asked to code up a few sites that require the Web page footer to be positioned either at the bottom of the browser window or at the bottom of the Web page – whichever is visually lowest.
A quick search on Google immediately brought up solarDreamStudio's immensely helpful tutorial on how to do just this, and so I promptly implemented, with results achieved just as you see on the packet. However, as my pages began to get a bit more complex, in one browser I began to see an intermittent bug. What happened was that when I viewed a page with a few images on it, Firefox would incorrectly position the footer on long pages (ones that scrolled below the bottom of the browser window).
A later project – whose design was out of my hands – absolutely required a sticking footer, so I had to once again delve back into the CSS code and figure out a solution. You then need to apply a bit of CSS: Categories. Equal height columns - companion columns method. 1 The illusion of equal height columns The search for a technique that offers real equal height columns leads nowhere because we don't have full vertical control in current CSS 2.1 implementations cross browser.
The available techniques are simulations of columns: a repeated image displaying Faux Columns [Cederholm], columns made of borders [Livingstone], and variations. We couldn't even fall back on a (CSS-)table, since there is no broad, sufficient implementation of display: table in the browsers. And a table would dismiss the accessibility request for having the columns logically ordered in the source. OneTrueLayout [Robinson] uses a promising technique [Challoner] where the columns are still not equal in height, but they are cut in length, so they appear as-if. In this article, we draw up a variation for the equal heights columns illusion, standing on the shoulders of OneTrueLayout. 2 Padding and negative margin.
Companion Columns: Percentages width, FooterStickAlt. Conflicting Absolute Positions. On two separate occasions this month, I’ve been required to produce a layout in which a fixed-width scrolling side “pane” and flexible scrolling main “pane” must resize to fill all available space in a browser window.
Issue № 241 As a CSS purist, I’ve always tried to avoid such dynamic layouts, but sometimes they’re required. When they are, I like to have a good old grumble about the fact that I’ve resorted to using JavaScript for my layouts. The most advanced way of achieving such a layout is to use a JavaScript toolkit such as DOJO—but for what I was trying to achieve, even DOJO felt too bloated and seemed liable to create further complications. We can, of course, achieve these layout goals by using JavaScript to resize the divs every time the page is loaded or resized.
It seems that using JavaScript is an attainable but inelegant solution for this layout. The problem with percentages#section1 The nature of divs#section2 In all browsers#section3.