Sticky footer overlapping content when content contains floats - css

Question

I am trying to implement a sticky footer with CSS using this: http://www.cssstickyfooter.com/using-sticky-footer-code.html .
I have almost got it working, but when having floats in my content container, I find that the footer will overlap a bit of the content.
This is the markup:
<div class="container" id="content-area">
<div class="module-content" id="mycontent">
<div class="menu">
<ul>
<li>
<a class="current-page" href="http://localhost/">1</a>
</li>
</ul>
</div>
<div class="module-content">
<div>
<p>Lorem ipsum dolor sit amet, consequat et metus, platea
posuere adipiscing porttitor dis amet ut. Turpis diam amet,
mollit commodo. Fusce vestibulum habitant, auctor vel ac
dui, nulla lacus hac, raesent euismod habitant eros massa
nulla. Justo dui, facilisis cras. Est ante maecenas
vehicula, etiam vestibulum mi lorem massa, sed nullam
suspendisse lectus ante purus gravida, iaculis urna pede
fermentum. Arcu id ligula arcu, erat vivamus quisque
quisque, tristique ipsum et. Sociis duis ut, morbi dolor
duis volutpat lacus viverra, scelerisque sodales sed, vel
nulla. Elit pede nullam ullamcorper consectetuer ac massa,
lobortis eget id dictumst et quis, nulla metus. Magnis id
id suscipit porttitor faucibus, felis commodo risus massa,
fusce tempus praesent aliquet sit vulputate tempor.</p>
</div>
</div>
</div>
</div>
<div class="container" id="footer">
<div class="container">
<p>Lorem ipsum dolor sit amet, consequat et metus, platea
posuere adipiscing porttitor dis amet ut. Turpis diam amet,
mollit commodo. Fusce vestibulum habitant, auctor vel ac dui,
nulla lacus hac,</p>
</div>
</div>
And the CSS:
html, body {
height: 100%;
}
#content-area {
min-height: 100%;
overflow: auto;
position: relative;
}
.container {
margin: 0 auto;
width: 985px;
}
#mycontent .menu {
float: left;
margin-right: 10px;
padding-top: 13px;
width: 100px;
}
#mycontent .module-content {
float: left;
width: 700px;
}
#footer {
color: red;
background: black;
opacity: 0.6;
height: 70px;
margin-top: -70px;
width: 100%;
clear: both;
}
And a fiddle of the above: http://jsfiddle.net/CfuAg/
And a picture of what's happening
Why is this happening and what are some ways to fix it? I tried adding a padding of 70px to #content-area, but it pushes the footer down by 70px and doesn't stick to the buttom of the window anymore.

Answer 1

Fixed! overflow: auto was assigned to the wrong element (it should be assigned to .module-content) and module-content should have a bottom-padding with a height of the footer:
html, body {
height: 100%;
}
#content-area {
min-height: 100%;
position: relative;
}
.container {
margin: 0 auto;
width: 985px;
}
#mycontent .menu {
float: left;
margin-right: 10px;
padding-top: 13px;
width: 100px;
}
#mycontent .module-content {
float: left;
width: 700px;
overflow: auto;
padding-bottom: 70px;
}
#footer {
color: red;
background: black;
opacity: 0.6;
height: 70px;
margin-top: -70px;
width: 100%;
clear: both;
}

Answer 2

I've modify your fiddle to make it works the way I understood what you're looking for.
I've remove the clear: both; and margin-top: -70px; and use instead the bottom property which I've set to 0
http://jsfiddle.net/CfuAg/4/
Hope this is what you looked for.