Footer Fluster and Frustration

footer issueThis little problem is about style positioning of your footer.  We’ve found the solution for this, and I am sure many other designers have seen and solved this issue in the past. This was the problem.

The footer material was floating above the content at the bottom of the page when the content in column 2 was shorter that the content showing in column 1. Naturally when something seems to go wrong in Firefox, everything seems to be fine in Internet Explorer, go figure. Anyway, the problem it turns out comes from setting a specific height in column 1. A specific [height] attribute is required for IE6 to work properly because IE6 renders the attribute incorrectly as [min-height].

footer solution resultThe solution was actually pretty simple. Column 1 had to be set with a [min-height] which of course sets a minimum height for the column which can then expand. Of course an IE6 hack of setting the [height] attribute had to be applied specifically for IE6.

to blog