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

Question

Hi Guys,

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 half way 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 some how it works in IE but no where else.

Can anyone help put me out of my missery 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

zigdon 's Solution works perfectly fine for me !! Thanks !!