Can not get CSS Sticky footer to work. What am I doing wrong?

Question

Well, this is my first post here and really enjoying the site.

I have a very basic (ugly as sin) site I have started and for some reason, I can not get the CSS Sticky footer to work for FireFox. IE works but FF shows it halfway up the page.

The URL is http://dev.aipoker.co.uk

I know I should be developing in FF and bug fixing in IE so I am guessing I might have actually made a mistake and somehow it works in IE but nowhere else.

Can anyone help put me out of my misery please?

Thanks, guys and gals.

Fx 3.0.x on WinXP looks almost the same as IE7 on this machine. Can you provide a picture or more detail about what you're trying to accomplish (link to functioning example would be nice too.) — Rob Allen, Oct 01 '08 at 20:15

score 4 · Answer 1 · answered Oct 01 '08 at 20:30

4

I've had success with code like this:

footer { 
  display: block; 
  position: absolute; 
  width: 100%; 
  bottom: 0px; 
}

answered Oct 01 '08 at 20:30

zigdon

14,573
6
35
54

1

It (always) sticks to the bottom, but overlays the actual container contents. – Alix Axel Jul 08 '11 at 12:04

dguaraglia · Accepted Answer · 2013-11-22T23:00:27.757

3

Try this one, it works well on Firefox.

BTW, you should listen to Boagworld's podcast if you don't already. It's brilliant! :)

Cheers.

edited Nov 22 '13 at 23:00

answered Oct 01 '08 at 20:16

dguaraglia

5,774
1
26
23

Looks like they've moved the article here: http://boagworld.com/dev/fixed-footers-without-javascript/ – Ben Y Oct 02 '13 at 00:46

score 1 · Answer 3 · answered Apr 04 '12 at 17:20

This is all you need to know about css only sticky footers & sticky navs:

Stick to bottom of page

Position: absolute;
top:auto;
bottom: 0;

Stick to bottom of screen

Position: fixed;
top:auto;
bottom:0;

Any issues and it's probably due to where you placed your html code (don't make the footer a child element unless it's sticking to the content wrapper), or overlapping CSS.

You can apply the same technique to sticky navigation by flipping the auto & top. It'sis cross browser compatible (From memory from IE7 and above) including mobiles.

score 1 · Answer 4 · answered Oct 01 '08 at 20:50

The minimal changes I can see to do this would be:

move footerSection inside of body
set position absolute on both body and footerSection
set bottom = 0px on footerSection

which ends up with something like this in your head:

<style type="text/css">
  #body, #footerSection { position: absolute; }
  #footerSection { bottom: 0px; }
</style>

<div id="body">
   ...
   <div id="footerSection">
      ...
   </div>
</div>

Can not get CSS Sticky footer to work. What am I doing wrong?

4 Answers4

Linked