A Sticky footer than doesn't apply to all pages

I'm currently working on a website that needs a sort of sticky footer, but not in all places.

For the home page, the footer stick to the bottom automatically, but for other pages, it doesn't such as http://www.hostcule.org/newsite/about-us

How do I, using CSS, get it to stick to the bottom?

Current CSS for footer div

#footer{
    clear:both;
    float:left;
    width:100%;
    border-top:solid 1px #d1d0d0;
    background-color:#f1efef;
    margin-bottom:-10px;
}

Solution

The best I've ever been able to do is push the footer to off the bottom of the page so it is always off the bottom of the screen. The following is an example of how to do this. The stickyfooterfail division does not work and I do not know why but the bottom property does work properly if you cahnge position to absolute.

<html>
  <head>
    <style type='text/css'>
body {
height: 100%;
}

#fullheight {
background:#ff0;
position: relative;
min-height: 100%;
}
#stickyfooterfail {
position: relative;
bottom: 0px;
}

#stickyfooter {
background: #f0f;
}
    </style>
  </head>
  <body>
    <div id='fullheight'>
      Some text<br>
      Some text<br>

      Some text<br>
      <div id='stickyfooterfail'>
        Should be at the bottom but isn't
      </div>
    </div>
    <div id='stickyfooter'>
        This is pushed off the bottom by the min-height attribute of #fullheight
    </div>
  </body>
</html>

If you know that the footer is going to be a constant absolute size then you could set padding-bottom to -(height) eg -40px if it was 40px high and then set bottom of #stickyfooterfail to the same value.