Sticky footer overlapping content when content contains floats

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: ```

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…

Accepted Answer

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;
}
```

Sticky footer overlapping content when content contains floats

Solution

Problem