[2011] Footer always at the bottom of the screen

Hello!

Website I’m working on is
http://51stokescroft.com.gridhosted.co.uk/

I was researching how to make a footer always at the bottom of the screen, no matter what resolution of the screen and no matter how much content there is.

Somewhere online I found this code:

#body {
   padding:10px;
   padding-bottom: 2em;   /* Height of the footer */
}
#colophon, #site-generator {
   position: absolute;
   bottom:0;
   width:100%;
   height: 2em;   /* Height of the footer */
   background: url(http://51stokescroft.com.gridhosted.co.uk/wp-content/uploads/2013/10/footer-bg.png);
}

Which worked great initially, and then I saw that sometimes it floats up to the middle of the page, and it did so when I checked the website on smartphone.. If it floats up to the middle of the page, I found out that removing position:absolute fixes it for a bit, after a while the footer again goes back to the middle of the page sometimes. I then add position:absolute back and it works again for a bit.. But don’t know what’s the problem with it in the first place?

Also another problem with this footer I have is that if i decrease the size of the screen, it always stays the same size and ends up being either on top or underneath the other items of the page (e.g. menu).. How could I fix it?

Will appreciate the help massively!

Thanks a lot,
Domi