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.

Answer 1

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.

Answer 2

I've had success with code like this:

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

Answer 3

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>

Answer 4

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.