CSS Sticky Footer Not Working

Question

I have a simple layout that I am trying to get to work with CSS. The top and bottom rows are 35px high with a dynamically sized center. I am trying to get Sticky Footer to work using this tutorial: http://www.cssstickyfooter.com/using-sticky-footer-code.html

However, instead of the footer being at the bottom, regardless of the amount of content in the middle, I am seeing the following:

Here is my CSS

html, body{
height: 100%;
margin: 0;
}

body{
font-family: Arial,Verdana;
font-size: 12px;
}

#site_wrapper{
width: 100%
min-height: 100%;
background-color: #fff;
padding: none;
}

#top_bar{
clear: both;
height: 35px;
background-color: #1468b3;
line-height: 35px;
font-size: 14px;
text-align: right;
color: #fff;
padding-right: 15px;

}

#content{ /* Content Wrapper */
clear: both;
overflow: auto;
padding-bottom: 35px;
}

#content_left{
float: left;
width: 50%;
color: #000;
}

#content_right{
float: right;
width: 50%;
color: #000;
}

#footer{
clear: both;
position: relative;
margin-top: -35px; /* negative value of footer height */
height: 35px;
background-color: #1468b3;
line-height: 35px;
font-size: 14px;
color: #fff;
}

And here is the HTML

<div id="site_wrapper">
  <div id="top_bar">
    This is the Top Bar
  </div>
  <div id="content>
    <div id="content_left">
      Test
    </div>
    <div id="content_right">
      Test
    </div>
  </div>
</div>
<div id="footer">
  This is the footer
</div>

Answer 1

Add height: 100%; to #site_wrapper

DEMO