Solved

Footer keeps flying up into the rest of the page

Posted on 2004-03-24
2
211 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
ID: 10673264
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
ID: 10673738
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

ScreenConnect 6.0 Free Trial

Explore all the enhancements in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Error in script 11 56
Custom Form Design to Match this example 1 22
A simple Float not working. 5 19
Changing Two Areas of a Page 5 17
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
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 tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

777 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