Comments on: Pure CSS: Sticky Footer

By: Ciaran

Ciaran — Thu, 13 Nov 2008 18:16:37 +0000

I found this to work much better than Ryan Faits code, which doesn’t work in Firefox no matter how hard I try. It always put the footer at the bottom of the screen as opposed to the bottom of the content. I’d recommend this version anyway, seems more robust. Cheers!

By: Sean Bannister

Sean Bannister — Sat, 01 Nov 2008 01:03:38 +0000

Here’s some screenshots of this method from a heap of browsers you’ll notice it doesn’t work under IE 5.01 and 4.0 :
http://browsershots.org/http://www.lwis.net/profile/CSS/sticky-footer.html

Due to the small browser share of IE 5 this doesn’t really bother me but it would be nice to work it out.

By: Colin

Colin — Sat, 25 Oct 2008 11:29:17 +0000

I have re-visited the padding problem. What I did originally was to remove your “theme” stuff as well as the link to your other CSS file. I wrongly attributed the scroll bar appearance to the p margins. I now discover that it is the padding applied to your “about” div. If the padding is non-zero, then there is no scroll bar. If the padding is zero, then scroll bar appears. BUT: if the padding is too small, then when the window is short then the footer overlaps the content. If you give the footer an opacity of around ,5, then you can see what overlaps with the padding too small.

By: admin

admin — Sun, 19 Oct 2008 17:10:26 +0000

Thanks Colin for your feedback.

Regarding issue #1, see this sticky footer without the link to my CSS file. Paragraph margin is set to 1em and it still looks fine on all browsers.

Regarding issue #2 I was actually hoping IE to enclose a float within a container ‘automatically’ (which it still does in many cases and websites), but I will have to look into this in the near future why it’s not happening in this simple example.

By: Colin

Colin — Thu, 16 Oct 2008 15:06:32 +0000

There is a problem with IE if you float your “about” div. The footer will obscure the last line when the window is too small to hold both the content and the footer. The “clear:both” is clearly not working in IE. This is the solution that I have found - there may be a better one:

First create a new class in the CSS:

#prefooter {
margin: 0 0 1px;
width: 100%;
height: 1px;
clear: both;
}

and then put a suitable div in after the “about” div, so the structure looks like:

.. Whatever…

My Sticky Footer

That seems to satisfy IE and does not upset FF.

By: John

John — Wed, 15 Oct 2008 13:17:38 +0000

Thanks for the post. I normally use the Ryan Fait’s sticky footer solution (http://ryanfait.com/sticky-footer/), but for some reason it simply would not work on the site I was cutting up today.

Anyway found your solution (the principle is basically the same but your implementations are different) and it worked like a treat.

Cheers

By: colin

colin — Tue, 14 Oct 2008 14:56:09 +0000

Try your sticky footer, but remove the link to your CSS file.
I’ve just done it in IE7 - same thing - the scroll bar appears when the margin for “p” is not set to zero,
Other than that, this is a really neat solution - much better than others that I have seen.

By: admin

admin — Mon, 13 Oct 2008 11:52:47 +0000

Colin, again, it sounds like a specific issue. Provide us with a link to your page and we’ll see if we can help. Margins, by the way, create outer, cross-layer space, so it can leak outside parent layers.

By: Colin

Colin — Mon, 13 Oct 2008 09:00:09 +0000

Unfortunately, that does not work for me (FF 3.0.3). If I put a background over the “content” div, I see a white top margin, which pushes the displayed area larger than the window, however large the window is! Putting p{margin:0;} solves this, but I do not understand how the “p” margin has leaked out into the enclosing section.

By: admin

admin — Sun, 12 Oct 2008 19:50:39 +0000

To Colin and all others that don't want to import my reset.css. You should replace:

html, body, #container { height: 100%; }

with:

html, body, #container { height: 100%; margin: 0; padding: 0; }

Good luck!