Sticky footer at the bottom - css

Question

I'm having trouble with my footer, it's not being pushed by the content, I already tried to substitute absolute to relative, but with no success, I'm trying to use bottom:0; but it's not working either, here is my css code:
html, body {
width:100%;
min-height:100%;
background-image: url(../img/bg.png);
background-repeat: repeat;
}
* {
margin: 0px;
padding: 0px;
}
a, img {
border:none;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#wrapper {
width: 1024px;
margin-right: auto;
margin-left: auto;
min-height: 100%;
position:relative;
}
#foot {
width: 100%;
height:200px
position:absolute;
bottom:0;
background-image:url(../img/foot.png);
background-repeat:no-repeat;
}
#banner {
min-height: 100%;
margin:0;
padding:0;
position: relative;
top: 24px;
background-image: url(../img/banner2.png);
background-repeat:no-repeat;
width:100%;
height:173px;
}
#navigation {
height: 60px;
position: relative;
left: auto;
width: 100%;
top: 23px;
margin: 0px;
padding: 0px;
z-index:1;
border: none;
}
#categoria {
position: absolute;
width: 710px;
height: 240px;
z-index: 0;
left: -29px;
top:30px;
padding: 0px;
z-index:1;
}
.othergames{
position: absolute;
top: -13px;
width: 740px;
height: 251px;
background-image: url(../img/otherg.png);
background-repeat: no-repeat;
z-index:1;
left: -43px;
}
.othergames-back{
position: absolute;
top: -11px;
width: 730px;
height: 247px;
background-color:#FFF;
left: -37px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#texto{
height: 10px;
text-align:center;
width: 50px;
margin: 0px;
padding: 0px;
left: 34px;
top: 243px;
}
#apDiv1 {
position: absolute;
left: -3px;
top: 3px;
width: 209px;
min-height: 100%;
z-index: -1;
margin: 0px;
padding: 0px;
}
#like {
position: relative;
left: -3px;
top: 550px;
width: 215px;
min-height: 100%;
z-index: -1;
margin: 0px;
padding: 0px;
}
#apDiv2 {
position: absolute;
left: 220px;
top: 60px;
width: 862px;
height: 482px;
z-index: 0;
padding: 0px;
}
#apDiv4 {
margin: 0;
padding: 0;
position: absolute;
left: -6px;
top: 90px;
width: 201px;
height: 499px;
z-index: 1;
}
And the html code:
<div id="wrapper">
<div id="banner"></div>
<div id="navigation">
<div id="apDiv4">
</div>
<div id="fb-root"></div>
<div id="like">
<div class="fb-like-box" data-href="https://www.facebook.com/pages/Legend-of-Games/476628629090111" data-width="215" data-show-faces="true" data-stream="false" data-show-border="false" data-header="false"></div></div>
<div id="apDiv2">
<script>
(function($){
$(window).load(function(){
$("#apDiv2").mCustomScrollbar();
});
})(jQuery);
</script>
<div align="center" id="thumb">
<div id="screen_game">
<img style="border-radius:5px;border:thin solid #FFF;" src="../legendofgames/documentos/games/<?php echo $row_GameData['strImage']; ?>" width="160" height="130"/>
<div align="center" id="gametext"><?php echo $row_GameData['strNome']; ?> </div>
</div>
</div>
<div id="apDiv1"><img src="../img/lateralb2.png" width="209" height="592"/>
</div>
</div>
</div>
<footer >
<div id="foot"></div>
</footer>
</body>

Answer 1

Since you had some background images and content that weren't available, I generated and inserted some into a <section> with an ID of container. As you can see in the fiddle, I have just set up the footer as a fixed position block element at bottom: 0;, which means that it will always be at the bottom.
CSS:
footer {
width: 100%;
position: fixed;
bottom: 0;
background: green;
}
Have fun with the rest of the page!

Answer 2

I think you need to change your position to fixed.
#foot {
width: 100%;
height:200px
position:fixed;
bottom:0;
background-image:url(../img/foot.png);
background-repeat:no-repeat;
}
I can't test your code but I was able to get a sticky footer using a similar styling.