Solved

Footer keeps flying up into the rest of the page

Posted on 2004-03-24
2
214 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
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!
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

707 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