• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 227
  • Last Modified:

Footer keeps flying up into the rest of the page

On this page: http://www.ihea.info/pages/results.asp?reg=18 

the div with id of "footer" in the bottom of the page once in a while flies up to the top of the page and rests right under the sidebar. It doesn't happen very often. Keep using the sidebar jump menus and sooner or later it will happen. I am wondering what is wrong with the structure of the page. Is there a way to tell the foot div to stay in the bottom of all the other divs and never overlap them?

This is my CSS for the footer:

#footer {
      display: block;
      position: relative;
      margin: 0% 2% 5px;
      border: solid #fff 1px;
      padding: 0px;
      font-size: .6em;
#footer p {
      margin-bottom: -15px;
      margin-left: 20px;
#footer hr {      
      display : none;
1 Solution
The problem is that the footer just sits at the bottom of the content, so on short content pages it rides up.  This is the solution:

Do the body tag this way:
<body onload="setBottom(self.screen.availHeight)">

The scripting goes in the head like this:

          <script type="text/javascript">
              function setBottom(H)
                   if (obj.offsetTop<H-divoffset)
              // -->

If the page is more than full screen the footer will position at the botom of the page.  it the page is less than a full screen the footer will position at the bottom of the screen.  

polaatxAuthor Commented:
I see what you mean but I am sure that's not the case becasue it happens regardless of the size of the page.

I ended up taking out the position:relative value out of the #footer and now it doesn't seem to be doing it.

But I will use your code to be sure that the footer stays on the bottom on very short pages. So thank you COBOLdinosaur.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now