Footer Overlaps Div before Dropping Below

I managed to make my footer to stick to the bottom of the window, then avoid my content div... but now, it's overlapping for about 15px before dropping below.

I want the footer to drop, but to never overlap the content. I think it may have something to do with my margins, but my tweaking has not yet solved this.

Any suggestions?

Adding margin-bottom:15px doesn't seem to help, because it's only shown once the footer overlaps enough to push the footer down. Then the margin is shown, but not before that small amount of overlap.

The #push div is supposed to make this all possible, from what I understood on Twitter's bootstrap example.

CSS:

* {
    margin: 0;
    padding: 0;
}
html {
    height: 100%;
}
body {
    margin: 0;
    height: 100%;
}
#wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -50px;
    min-width: 900px;
}
.main_nav {
    list-style-type: none;
    margin: 0;
    width: 160px;
    float: left;
    padding-left: 40px;
    overflow: hidden;
}
#bio_content {
    width: 700px;
    min-height: 445px;
    margin-bottom: 15px;
    float: left;
}
#bio_text {
    padding: 10px;
}
#push {
    height: 50px;
}
#footer {
    height: 50px;
    width: 100%;
    float: left;
}

HTML:

<body>
<div id="wrapper">
  <div id="header">
    <h1></h1>
  </div>
  <ul class="main_nav">
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="music.html">Music</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="gallery.html">Gallery</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
  <div id="bio_content">
    <div id="bio_text"></div>
  </div>
  <div id="push"></div>
</div>
<div id="footer">
  <div id="footer_content"></div>
</div>

</body>
</html>

Solution

I thin it's a float issue. A fiddle would help diagnose this better. I would suggest doing this

<body>
<div id="wrapper">
  <div id="header">
    <h1></h1>
  </div>
  <ul class="main_nav">
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="music.html">Music</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="gallery.html">Gallery</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
  <div id="bio_content">
    <div id="bio_text"></div>
  </div>
  <div style="clear:both"></div> //add this to clear the bio_content div
  <div id="push"></div>
</div>
<div id="footer">
  <div id="footer_content"></div>
</div>

</body>
</html>