title: Footer Only sticks to bottom of SCREEN not content
body: <p>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)</p>
  
  <p>Link: nova.it.rit.edu/~whateverokay/index.php</p>
  
  <p><strong>I HAVE TRIED:</strong></p>
  
  <p>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.</p>
  
  <p><strong>I HAVE READ THESE:</strong></p>
  
  <ul>
  <li><p>matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page</p></li>
  <li><p>wordpress.org/support/topic/fixed-footer-covering-content</p></li>
  <li><p>webdeveloper.com/forum/showthread.php?202513-Position-footer-at-bottom-regardless-of-content-height</p></li>
  <li><p>Any question related to this on this website.</p></li>
  <li><p>And a few others I cannot recall and YES even sticky footer that some of the sites linked to (cssstickyfooter.com/)</p></li>
  </ul>
  
  <p><strong>Basic Structure:</strong></p>
  
  <pre><code>   &lt;div id="mainHead"&gt;
      other divs to hold header
      &lt;/div&gt;
      &lt;div id="wrapper"&gt;
      &lt;div id="content"&gt;
      content here
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="footer"&gt;
      &lt;footer&gt;
      content here
      &lt;/footer&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>    #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%;
  }
  </code></pre>
  
  <p>YES some of it may be unnecessary, but I've been trying everything. 
  <strong>WHAT I CANNOT USE: JQUERY</strong>
  <em>Position fixed also does not work because it covers content.</em> Furthermore it needs to only be at the end of the content.</p>
  
  <p>This is a school project. I have my restrictions. Must be IE8 compatible.
  Javascript is okay, if anyone knows a solution for that.</p>