Geek Answers Handbook

Sticky footer overlapping content when content contains floats

I am trying to implement a sticky footer using CSS: http://www.cssstickyfooter.com/using-sticky-footer-code.html .

Almost everything works for me, but when I float in the content container, I found that the footer overlaps 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 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 the script above: http://jsfiddle.net/CfuAg/

And a picture of what is happening enter image description here

Why is this happening and what are some ways to fix it? I tried adding an indent 70pxto #content-area, but it pushes the footer on 70pxand no longer sticks to the boot window of the window.

+5
source share
2 answers

! overflow: auto ( .module-content), module-content bottom-padding :

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;
}
+2

, , , .

clear: both; margin-top: -70px; bottom, 0

http://jsfiddle.net/CfuAg/4/

, , .

+1

More articles:


All Articles