Sticky Footer not working

I'm trying to make my footer going down as the contents appears, but what I'm getting is the footer in the middle of the page, right below of my navbar, I want it at the very bottom of the page and automatically pushed by the content, I tried this tutorial here but I don't know if did it right, obviously I didn't, because it isn't working, so can someone help me?

<div id="wrapper">
<div id="banner">

  <img src="../img/banner2.png" width="1024" height="173" longdesc="../index.php" alt=""/>     </div>
<div id="navigation"><?php include('C:/xampp/htdocs/legendofgames/includes/navbar.php'); ?>


<div id="apDiv4">

<?php include('C:/xampp/htdocs/legendofgames/includes/menu_cat.php'); ?>


</div>


<div id="fb-root"></div>

<div id="like">
<div class="fb-like-box"></div></div>



<div id="apDiv2">



 <!-- TemplateBeginEditable name="gamespace" -->
  <h1>&nbsp;</h1> 
 <!-- TemplateEndEditable -->

  <!-- TemplateBeginEditable name="EditRegion4" -->
  <!-- TemplateEndEditable --></p>



</div>

<div id="apDiv1"><img src="../img/lateralb2.png" width="209" height="592" alt=""/>  

</div>

 </div>

<footer class="site-footer">


</footer>

The CSS code:

body {

width:100%;
height:100%;
background-color: #FFF;
background-image: url(../img/bg.png);
background-repeat: repeat;
}

#wrapper {
width: 1024px;
margin-right: auto;
margin-left: auto;
min-height: 100%;
top: 5px;
margin-bottom: -200px;
display: block;

}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 200px; 
}

.site-footer {
background-image: url(../img/foot.png);
}

Solution

Looking good, all you need to do is use absolute positioning and a bottom of 0.

.site-footer {
    background-image: url(../img/foot.png);
    position: absolute; 
    bottom: 0;
    width:100%
}

Make sure to use the width:100%; as I'm sure it will save you from bugs later on in your project.