Clear Footer to Prevent Content Overlap

I've found a method of placing the footer that I like, except for the fact that footer overlaps the content when the page resizes.

Using the structure and formatting I have already, how can I "clear" the footer, so that it drops off when the page resizes (avoiding an overlap of #content)?

I've tried clear: left and that does nothing for this.

Essentially, I want the footer to always be visible, and attached to the lower left of the window, as long as space allows; however, when the window gets smaller, I don't want the footer to overlap my content.

CSS:

* {
    margin: 0;
    padding: 0;
}
html {
    height: 100%;
}
body {
    background-size: cover;
    margin: 0;
    height: 100%;
}
#wrapper {
    min-height: 100%;
    height: 100%;
    min-width: 900px;
    overflow: hidden;
}
.main_nav {
    margin: 0;
    width: 160px;
    float: left;
    padding-left: 40px;
    overflow: hidden;
}
#content {
    float: left;
    width: 750px;
    height: 600px;
}
#footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 50px;
}

HTML:

<body>
<div id="wrapper">
  <div id="header">
    <h1></h1>
    <ul class="main_nav">
      <li></li>
    </ul>
  </div>
  <div id="content">
  </div>
</div>
<div id="footer">
  <div id="footer_content"></div>
</div>
</body>

Solution

The answer has been already choosen, but i wanted to give an alternative.

The "wrapper" contains "header" and "content", while the "footer" is outside of it. You could, for example, add

z-index:10;

to the wrapper's css and

z-index:1;

to the footer's css.

This one last isn't really needed, but it's for completeness. This way, whenever they get in "touch", the one with higher z-index will remain on foreground (ie, higher level on the z-axis, that is the axis perpendicular to the screen surface) and the other elements will slide behind, according to their own index.