aip solutions developer’s blog

A few weeks ago I found in Internet two beautiful posts to footer stick – lucky accident considering the huge information in the web. And lucky me, if you can imagine how long I’ve been trying to find out how to avoid using tables for layout. Even if it is only to stick the footer on bottom of the page.

Stop using tables!

Except for table-data of course

In the web you can find several ways to stick the footer without table (with height 100%). Some of them are based on JavaScript and often they are quite complicate. Others used long and messy hacks or a lot of extra HTML markup and the solution is confusing.

Now I want to say ‘Thank you for the really simple and working methods!’ to Bobby van der Sluis and to Ryan Fait.

At first I thought that these methods work only in XHTML, but today I tested both solutions in different doctypes and they …

Work fine in (X)HTML and IE6, IE7, FF, Opera, Safari & Chrome

Here is the list of doctypes tested in Internet Explorer 6,  Internet Explorer 7, Mozilla Firefox 3.0.6, Opera, Safari for Mac and Google Chrome:

• HTML 4.01 Transitional
• HTML 4.01 Strict
• HTML 4.01 Frameset
• XHTML 1.0 Transitional
• XHTML 1.0 Strict
• XHTML 1.0 Frameset
• XHTML 1.1

Resource 1: A List Apart

Bobby van der Sluis has described the problem with the footer since 2004. In his article Exploring Footers he represents the JavaScript solution because of IE5 bug.
Although, his simple CSS method works in IE and FF, so here is the code:

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

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

Resource 2: Las Vegas Web Design

The second nice post on this topic is Make the Footer Stick to the Bottom of a Page by Ryan Fait. It is really short and understandable resource. Here  I have to mention that some times in Internet Explorer there is a little bug – it is possible to appear vertical scrollbar when you resize the browser’s window.
Here is the code:

* 	        { margin:0; }
html,body { height:100%; }
.wrapper  { min-height:100%; height:auto!important; height:100%; margin:0 auto -4em; }
.footer,
.push     { height: 4em; }

<div class="wrapper">
    <p>Your website content here.</p>
   <div class="push"></div>
</div>
<div class="footer">
    <p>Copyright (c) 2008</p>
</div>

Floating content problem

Maybe it will be a problem using floating elements in the main content (before footer). So you can check for more information the site www.cssstickyfooter.com and the post with many comments A CSS Sticky Footer that Works in 2009 (Chrome too) – both by Steve Hatcher.

In my next web project I’ll test that and post here.

Updates

2009-09-28: I’ve just added new post with my own solution for XHTML http://blog.aip-solutions.com/311/footer-stick-on-bottom-2/