Untitled

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sticky Footer</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<style>
body{ margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFF; text-align:center; }
#top-bar{ height:32px; width:100%; background:#333; }
#header{ height:160px; width:100%; background:#ccc; }
#wrapper{ width:600px; margin:0 auto; }
.container{ height:500px; width:390px; background:#BCF2FC; float:left; }
.sidebar{ height:500px; width:200px; background:#999; float:right; }
.clear:after{ content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; margin-bottom:30px; }
#footer{ background:#666; height: 146px; width: 100%; }

</style>

<script type="text/javascript">
$(window).bind("load", function() {

       var footerHeight = 0,
           footerTop = 0,
           $footer = $("#footer");

       positionFooter();

       function positionFooter() {

                footerHeight = $footer.height();
                footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";

               if ( ($(document.body).height()+footerHeight) < $(window).height()) {
                   $footer.css({
                        position: "absolute"
                   }).animate({
                        top: footerTop
                   })
               } else {
                   $footer.css({
                        position: "static"
                   })
               }

       }

       $(window)
               .scroll(positionFooter)
               .resize(positionFooter)

});

</script>
</head>
<body>


<div id="top-bar">top-bar content</div>
<div id="header">header</div>

<div id="wrapper">
    <div class="container">container</div>
    <div class="sidebar">sidebar</div>
</div>

<div class="clear"></div>

<div id="footer">
    Sticky Footer
</div>


</body>
</html>