Solved

Footer keeps flying up into the rest of the page

Posted on 2004-03-24
2
210 Views
Last Modified: 2006-11-17
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;
      color:#666666;
      clear:both;
}
#footer p {
      margin-bottom: -15px;
      margin-left: 20px;
      }
#footer hr {      
      display : none;
      }
0
Comment
Question by:polaatx
2 Comments
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 125 total points
Comment Utility
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)
              {
                   obj=document.getElementById('footer');
                   divoffset=obj.offsetHeight+275;
                   if (obj.offsetTop<H-divoffset)
                   {
                      pos=H-divoffset;
                      obj.style.position='absolute';
                      obj.style.top=pos+'px';
                   }
              }
              // -->
         </script>

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.  

Cd&
0
 

Author Comment

by:polaatx
Comment Utility
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.
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now