treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Space at the bottom of the site?

  • I've played around with this quite a bit trying to get my footer to align to the bottom of the page (not visible sticky all the time, just sticky to the bottom) and my usual css tricks aren't working. I think there is something in js causing there to be all of this extra space, but I don't know much about js so I can't fix it. Thoughts anyone?

    http://imip.rvadv.com/index2.html (This site is just getting built so ignore the rest of the page, I'm just trying to fix the footer right now)

    Thanks!
  • Try adding the bold or position:relative to see if that helps.

    #footer-container {
    width:100%;
    background:#060d19 url(../images/bg-footer.png) bottom repeat-x;
    margin:0;
    padding:0;
    height:94px;
    position:absolute;
    z-index:999;
    bottom:0;
    }
  • You have min-height of 2000px set on the BODY tag, so if your page is less than 2000px high, a lot of extra space will be added. If that footer always needs to be stuck at the bottom, then indeed you'll have to add position:absolute; to the footer (and position:relative; to the BODY), but then there will be a lot of space on top of it.

    If you want a proper sticky footer solution, check out http://www.cssstickyfooter.com/
  • perfect! thanks!