Footer Only sticks to bottom of SCREEN not content

Question

I will start by saying, I am only posting this because any response on this website does not help at all regarding this topic, as the solutions given I've tried and they have not worked. (if i have missed one I apologize)

Link: nova.it.rit.edu/~whateverokay/index.php

I HAVE TRIED:

making the wrapper position relative and adding any padding to the bottom does not help. making the footer position absolute, does not help. It only goes to the bottom of the SCREEN not content. and therefore covers a bunch of content.

I HAVE READ THESE:

matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
wordpress.org/support/topic/fixed-footer-covering-content
webdeveloper.com/forum/showthread.php?202513-Position-footer-at-bottom-regardless-of-content-height
Any question related to this on this website.
And a few others I cannot recall and YES even sticky footer that some of the sites linked to (cssstickyfooter.com/)

Basic Structure:

   <div id="mainHead">
    other divs to hold header
    </div>
    <div id="wrapper">
    <div id="content">
    content here
    </div>
    </div>
    <div id="footer">
    <footer>
    content here
    </footer>
</div>

CSS:

    #wrapper{
position:relative;
min-height:100%;
height:100%;
padding-bottom:0px 0px 100px;
}
#content{
width:60%;
position:relative;
padding:10px;
}
#content, footer{
margin-left:auto;
margin-right:auto;
}
#footer{
font-size:9pt;
font-style:italic;
text-align:center;
overflow:auto;
height:100px;
position:absolute;
bottom:0px;
width:100%;
margin-top:50px;
border-top:4px solid #35475f;
background-color:#35475f;
clear:both;
}
footer{
width:60%;
}

YES some of it may be unnecessary, but I've been trying everything. WHAT I CANNOT USE: JQUERY Position fixed also does not work because it covers content. Furthermore it needs to only be at the end of the content.

This is a school project. I have my restrictions. Must be IE8 compatible. Javascript is okay, if anyone knows a solution for that.

bind your code inside a div. – Suchit kumar Dec 06 '14 at 04:54 — Suchit kumar, Dec 06 '14 at 04:54

score 3 · Answer 1 · answered Dec 06 '14 at 04:51

Create another DIV called "Container" at the top, then add the footer DIV to the end of it

<div id="container">
   <div id="mainHead">
       other divs to hold header
   </div>
    <div id="wrapper">
      <div id="content">
       content here
      </div>
    </div>
    <div id="footer">
     <footer>
        content here
     </footer>
    </div>
</div>

oh yeah, and get rid of all that CSS junk from (almost everything)

Footer Only sticks to bottom of SCREEN not content

1 Answers1