I am trying to get css sticky footer to work

Question

I have tried to implement css sticky footer on my page but it doesn't seem to be working. the footer is below the content but not sticking to the bottom of the page. http://www.cssstickyfooter.com/

you can view the site I am trying ti implement it on live at www.anderskitson.ca/mrskitson2012

Here is my html code, with some taking out for simplicity

<div class="container">
    <div id="main" class="row">
     <div class=" twelve columns ">
      <div class="row">
       <div class="11 columns offset-by-one">
        <img src="http://anderskitson.ca/mrskitson2012/wp-content/themes/mrskitson2012/images/kidsDrawings.jpg" alt="Kids Drawings"/>
      </div>
     </div>
    </div>
   </div>
<!-- container ends-->
</div>
<div id="footer" ></div>

Here is my css declarations

.container{position:relative; min-height:100%; }
#main{ overflow:auto; padding-bottom: 300px; }
#footer{ background-image: url('../images/footer.jpg'); height:300px; width:100%; position: relative; margin-top: -300px; clear:both;}

Answer 1

Update the css on line 45 foundation.css

html {
    font-size: 62.5%;
    height:100%
}

See the screen shot on this link: http://img854.imageshack.us/img854/9064/footerpos.jpg