I am trying to insert my footer at the bottom of the page in css

I am using base zurbs to build my site and I am trying to figure out how to create a footer that sticks to the bottom of the page. I've tried absolute positioning, but it overlaps the content. The footer I'm trying to position at the bottom is inside the container, however I could move it wherever needed. You can view the site live here

html code

<div class="container">
    <div class="row">
        <div id="logo" class="two columns">
            <a href="http://anderskitson.ca/mrskitson2012"><img src="http://anderskitson.ca/mrskitson2012/wp-content/themes/mrskitson2012/images/logo.png" alt="Mrs Kitson Kinderegarten"/></a>
        </div>
        <div id="title" class="ten columns">
        <p><span>Mr's</span> Kitson Kindergarten</p>
        </div>
    </div>
    <div class="row">
        <div class="ten columns">
            <div class="mainNav"><ul><li class="page_item page-item-19"><a href="http://anderskitson.ca/mrskitson2012/blog/">blog</a></li><li class="page_item page-item-17"><a href="http://anderskitson.ca/mrskitson2012/calendar/">calendar</a></li><li class="page_item page-item-9"><a href="http://anderskitson.ca/mrskitson2012/curriculum/">curriculum</a></li><li class="page_item page-item-15"><a href="http://anderskitson.ca/mrskitson2012/forms/">forms</a></li><li class="page_item page-item-2 current_page_item"><a href="http://anderskitson.ca/mrskitson2012/">home</a></li><li class="page_item page-item-13"><a href="http://anderskitson.ca/mrskitson2012/news/">news</a></li><li class="page_item page-item-11"><a href="http://anderskitson.ca/mrskitson2012/resources/">resources</a></li><li class="page_item page-item-21"><a href="http://anderskitson.ca/mrskitson2012/video/">video</a></li><li class="page_item page-item-7"><a href="http://anderskitson.ca/mrskitson2012/visible/">visible</a></li></ul></div>
        </div>
    </div>
    <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 id="footer" ></div>
<!-- container ends-->
</div>

      

        
        
        
      

    

css code

#footer{ background-image: url('../images/footer.jpg'); height:300px; width:100%; position: absolute; bottom:0;}