Getting a footer to stick to the bottom of the page - html

Question

I am currently building a website and require my footer to stick to the bottom of the page - I am struggling somewhat - beneath is an example of my HTML and my CSS - I need the footer to stay at the bottom if the page is small but grow with the page if it gets bigger.
HTML:
<div class="container">
<div class="main">
<!-- some content -->
</div>
</div>
<div class="clear"></div>
<div id="footer">
<div class="container">
<div class="footer_nav">
<h4>Site Map</h4>
<ul>
<li>Home</li>
<li>Example Page 1</li>
<li>Example Page 2</li>
<li>Example Page 3</li>
<li>Contact</li>
</ul>
</div>
<div class="footer_copy">
<p>©<?php echo date('Y');?> Oliver Fletcher<br/>
All Rights Reserved</p>
<h4>Where I learnt...</h4>
<img src="images/accreditations.jpg" alt="Team Treehouse">
</div>
<div class="footer_social">
<img src="images/twitter.png" alt="Twitter">
<img src="images/facebook.png" alt="Facebook">
<img src="images/linkedin.png" alt="LinkedIn">
<img src="images/google.png" alt="Google">
<h4>Get in touch</h4>
oli#thewebshare.co.uk
</div>
</div>
<div class="clear"></div>
</div>
</body>
CSS
html{
height: 100%;
}
.container{
width: 980px;
margin: auto;
min-height: 100%;
_height: 100%;
}
.main{
margin-bottom: -183px;
position: relative;
}
#footer{
width: 100%;
background-image: url('../images/nav_bg.png');
color: white;
font-weight: lighter;
position: relative;
padding: 20px 0;
height: 183px;
}

Answer 1

#footer{
width: 100%;
background-image: url('../images/nav_bg.png');
color: white;
font-weight: lighter;
position: fixed;
bottom:0px;
padding: 20px 0;
height: 183px;
}
Use position:fixed and bottom:0px

Answer 2

One problem I see is the duplicate use of the container class. You should have the container for the content and the container for the footer using separate class names, or you could use the css selector
body > .container
Otherwise, I'd try to switch the css for the .main to have the css rules below. The height and padding needs to be a equal fixed size.
.main
padding-bottom: 100px;
.footer
height: 100px; // FIXED HEIGHT IS IMPORTANT
There's a lot of examples of this on the internet. I used this one and found that it worked well. Hope this helped.

Answer 3

What you want is assign CSS elements to .clear under your #container and above your #footer. You want it essentially push the footer down so it sticks to the bottom.
This tutorial helped me, the whole page is dedicated to a sticky footer.
Sticky Footer Tutorial

Answer 4

Obviously there are many methods to this. Following this tutorial will do the trick as well:
http://www.cssstickyfooter.com/using-sticky-footer-code.html