Solved

How to keep footer div in bottom of page but not overlap content

Posted on 2004-04-01
12
1,686 Views
Last Modified: 2012-05-04
On this page: http://www.ihea.info/pages/test_css_ee_code.asp

I have a footer div that is absolutely positioned in the bottom of the page. However, it appears in the bottom of the page regardless of the size of the screen or the length of the content in the higer divs. So if content is longer than the screen, the footer covers it. When I change the positin of the footer to position:inline, it jumps to the top of the page, I assume because the higher divs are positioned absolutely.

I tried putting clear:both on footer div and didn't help.

My quesiton: how do I tell the footer div to appear in the bottom of the page (not the screen) and not overlap higher content.

This may have to do with my error in positioning the higher divs absolutely.

I am viewing this in Opera 7.23, but similar problm in IE 6.

The css is inline inside the header.

#footer {
      position:absolute;
      height: 50px;
      bottom:0;
      left: 2%;
      background-color:#fff;
      color: #666;
      font-size:.8em;
      width:100%;
}

Please ignore other pages in this site. It's a huge mess.
0
Comment
Question by:polaatx
  • 7
  • 3
  • 2
12 Comments
 

Author Comment

by:polaatx
ID: 10734441
Increasing points.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10734704
Okay, here's some possibilities.

Also - I've rearranged the layout a little - the main content on your page should really not be positioned absolutely - just let it flow naturally next to the sidebar, and under the header. You'll have a lot less problems that way.

Here's some revised code for you:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>IHEA: International Health Education Alliance</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
<!-- Code courtesy of COBOLdinosaur -->
<!--
function setBottom(H)
{
  obj=document.getElementById('footer');
  divoffset=obj.offsetHeight+225;
  if (obj.offsetTop<H-divoffset)
    {
    pos=H-divoffset;
    obj.style.position='absolute';
    obj.style.top=pos+'px';
    }
}
// -->
</script>

<script language="JavaScript" type="text/JavaScript">
<!--
<!-- for block display  --->

var supported = (document.getElementById || document.all);

if (supported)
{
     document.write("<STYLE TYPE='text/css'>");
     document.write(".display {display: none}");
     document.write("</STYLE>");

     var max = 7;
     var shown = new Array();
     for (var i=1;i<=max;i++)
     {
          shown[i+1] = false;
}
}

function blocking(i)
{
     if (!supported)
     {
          alert('This link does not work in your browser.');
          return;
}
     shown[i] = (shown[i]) ? false : true;
     current = (shown[i]) ? 'block' : 'none';
     if (document.getElementById)
     {
          document.getElementById('number'+i).style.display = current;
}
     else if (document.all)
     {
          document.all['number'+i].style.display = current;
}
}

<!-- for jump menu  --->
function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}

<!-- for spam proofing the mailto link --->

function mailme(text) {
  var myname="webmaster";    // CHANGE this to your actual username
  var myhost="ihea.info?subject=to webmaster at IHEA"; // CHANGE this to the name of your mail server
  var myaddy=myname+"@"+myhost;
  document.write("<a href=\"mailto:"+myaddy+"\">"+text+"</a>");
}

function MM_jumpMenuGo(selName,targ,restore){ //v3.0
  var selObj = MM_findObj(selName); if (selObj) MM_jumpMenu(targ,selObj,restore);
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

//-->
</script>

<style type="text/css">

html, body, table, tr, td
{
     padding: 0;
     margin: 0;
     font-size: 94%;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     color:#333;
}

ul li
{
     list-style-type:square;
     font-size: 100%;
}

#masthead
{
     position:relative;
     margin: 20px 20px 0 20px;
     height: 90px;    
     border: solid #aaa 1px;
     background:  url("images/logo/banner1.gif") white no-repeat left top;
}

#masthead span
{
     display:none
}

#menu
{
     position:absolute;
     bottom: 0;
     right:0;
     border-top: 1px solid #aaa;
}

#menu ul
{
     margin:0px;
     padding:0px;
}

#menu ul li
{
     display:inline;
}

#menu ul li a:link, #menu ul li a:visited
{
     padding: 0 1em 0 1em;
     margin: 0;
     text-decoration:none;
     border-left: 1px solid #aaa;
     font-size: 1em;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     color:#333;
     height: 1.5em;
     background-color:white;
}

#menu ul li a:hover, #menu ul li a:active
{
     padding: 0 1em 0 1em;
     margin: 0;
     text-decoration:none;
     border-left: 1px solid #aaa;
     font-size: 1em;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     color:#fff;
     height: 1.5em;
     background-color:#666;
}

#sidebar
{
     position:absolute;
     left: 20px; top: 130px;
     width: 187px;
     border-right: dotted #aaa 2px;
}

#sidebar hr
{
     display:none;
}

#sidebar select
{
     width: 125px;
     font-size: 12px;
}

#sidebar p
{
     font-size: 1em;
}

#sidebar h4
{
     color: #006699;
     font-size: 1em;
     font-weight:bold;
}
     
div#maincontent
{
     margin-left: 230px;
     margin-top: 18px;
     margin-right:40px;
}

#maincontent ul
{
     margin: 3% 3% 0%;
}
     
.noDisplay
{
     display:none;
}    
         
.header
{
     color: #006699;
     font-size: 1em;
     font-weight:bold;
     margin-bottom:-1%;
}

.header h3
{
     color: #006699;
     font-size: 1em;
     font-weight:bold;
     margin-bottom:-2%;
}

.notation
{
     border: solid 1px #006699;
     background-color:#f1f1f1;
     padding: 1%;
     width: 250px;
     margin-left:1%;
}

/* DISPLAY class controls the block region display triggered by javascript */
.display
{
     background-color: #f1f1f1;
     margin-left: 2%;
     margin-top: 2%;
     padding : 0% 1% 3% 3%;
     border: solid 1px #006699;
}


/* input redefinition put a border around all input tags */
input
{
     border: 1px solid orange;
     font-family: Verdana;
     font-size: 1em;
}

/* resultsBox is the div containing each of the results returned in results.asp. the bg is hard coded into the page to have different color rows */
#resultsBox
{
     width : 400px;
}

#footer hr
{
     display:none;
}

#footer
{
     height: 50px;
     margin-left:20px;
     background-color:#fff;
     color: #666;
     font-size:.8em;
}

#footer p
{
     margin-bottom:-1.4em;
}

</style>
</head>

<body onload="setBottom(self.screen.availHeight)">

<div id="masthead"><span><a href="home.asp"><img src="../images/logo/banner1.gif" alt="IHEA Homepage" width="450" height="70" border="0"></a></span>
  <div id="menu">
  <ul>
  <li><a href="home.asp">Home </a></li>
  <li><a href="mission.asp">About Us </a></li>
  <li><a href="development.asp">Our Work </a></li>
  <li><a href="support.asp">Support IHEA </a></li>
  <li><a href="contact.asp">Contact Us </a></li>
  <li><a href="emailupdates.asp">Email Updates</a></li>
  </ul>
  </div>
</div>

<div id="sidebar">
  <hr color="#999" width="95%">
  <h4 class="header">Browse IHEA's library of multilingual health brochures</h4>
  <form name="form1">
  <p><select name="language" onChange="MM_jumpMenu('parent',this,1)">
  <option value="" selected >Choose Language</option>
  <option value="results.asp?lang=4">Amharic</option>
  <option value="results.asp?lang=34">Arabic</option>
  <option value="results.asp?lang=25">Armenian</option>
  <option value="results.asp?lang=16">Bahasa Malay</option>
  <option value="results.asp?lang=7">Bengali</option>
  <option value="results.asp?lang=26">Bosnian</option>
  <option value="results.asp?lang=27">Bulgarian</option>
  <option value="results.asp?lang=18">Cambodian/Khmer</option>
  <option value="results.asp?lang=17">Chinese</option>
  <option value="results.asp?lang=33">English</option>
  <option value="results.asp?lang=19">Filipino/Tagalog</option>
  <option value="results.asp?lang=40">French</option>
  <option value="results.asp?lang=41">German</option>
  <option value="results.asp?lang=28">Greek</option>
  <option value="results.asp?lang=8">Gujrati (India)</option>
  <option value="results.asp?lang=9">Hindi (India)</option>
  <option value="results.asp?lang=20">Hmong</option>
  <option value="results.asp?lang=29">Hungarian</option>
  <option value="results.asp?lang=21">Indonesian</option>
  <option value="results.asp?lang=37">Italian</option>
  <option value="results.asp?lang=14">Japanese</option>
  <option value="results.asp?lang=10">Kanada (India)</option>
  <option value="results.asp?lang=15">Korean</option>
  <option value="results.asp?lang=35">Kurdish </option>
  <option value="results.asp?lang=22">Laotian</option>
  <option value="results.asp?lang=11">Marathi (India)</option>
  <option value="results.asp?lang=5">Nepal</option>
  <option value="results.asp?lang=42">Nigerian</option>
  <option value="results.asp?lang=45">Norwegian</option>
  <option value="results.asp?lang=39">Persian/Farsi</option>
  <option value="results.asp?lang=30">Polish</option>
  <option value="results.asp?lang=38">Portugese</option>
  <option value="results.asp?lang=12">Punjabi (India)</option>
  <option value="results.asp?lang=31">Romanian</option>
  <option value="results.asp?lang=32">Russian</option>
  <option value="results.asp?lang=1">Somali</option>
  <option value="results.asp?lang=36">Spanish</option>
  <option value="results.asp?lang=13">Sri-Lankan (Singaly)</option>
  <option value="results.asp?lang=2">Swahili</option>
  <option value="results.asp?lang=43">Sweden</option>
  <option value="results.asp?lang=24">Thai</option>
  <option value="results.asp?lang=6">Tibetan</option>
  <option value="results.asp?lang=46">Turkish</option>
  <option value="results.asp?lang=3">Ugandan</option>
  <option value="results.asp?lang=47">Urdu</option>
  <option value="results.asp?lang=23">Vietnamese</option>
  </select>
  <input type="button" name="Button1" value="Go" onClick="MM_jumpMenuGo('language','parent',1)"></p>
  <p><select name="subject" onChange="MM_jumpMenu('parent',this,1)">
  <option selected>Choose Subject</option>
  <option value="results.asp?sub=1">Breast Cancer</option>
  <option value="results.asp?sub=2">Prostate Cancer</option>
  <option value="results.asp?sub=3">Lung Cancer</option>
  <option value="results.asp?sub=4">Cervical Cancer</option>
  <option value="results.asp?sub=9">Endometrial Cancer</option>
  <option value="results.asp?sub=7">Female Circumcision</option>
  <option value="results.asp?sub=6">General Health</option>
  </select>
  <input type="button" name="Button2" value="Go" onClick="MM_jumpMenuGo('subject','parent',1)"></p>
  <p><select name="region" onChange="MM_jumpMenu('parent',this,1)">
  <option selected>Choose Region</option>
  <option value="results.asp?reg=8">North Africa</option>
  <option value="results.asp?reg=9">Southern Africa</option>
  <option value="results.asp?reg=3">East Asia</option>
  <option value="results.asp?reg=14">Central Asia</option>
  <option value="results.asp?reg=18">West Asia</option>
  <option value="results.asp?reg=7">The Middle East</option>
  <option value="results.asp?reg=4">North America</option>
  <option value="results.asp?reg=15">Latin America</option>
  <option value="results.asp?reg=2">Western Europe</option>
  <option value="results.asp?reg=17">Eastern Europe</option>
  </select>
  <input type="button" name="Button3" value="Go" onClick="MM_jumpMenuGo('region','parent',1)"></p>
  <p><select name="specpop" onChange="MM_jumpMenu('parent',this,1)">
  <option selected>Target Audience</option>
  <option value="results.asp?spec=10">Health Professionals</option>
  <option value="results.asp?spec=1">Gay Men</option>
  <option value="results.asp?spec=2">Lesbian</option>
  <option value="results.asp?spec=3">Inmate</option>
  <option value="results.asp?spec=4">Vision Loss (Brail/Tape)</option>
  <option value="results.asp?spec=5">Lower Literacy Level</option>
  <option value="results.asp?spec=6">African American</option>
  <option value="results.asp?spec=8">Native American</option>
  <option value="results.asp?spec=7">Alaskan Native American</option>
  </select>
  <input type="button" name="Button4" value="Go" onClick="MM_jumpMenuGo('specpop','parent',1)"></p>
  </form>
  <br>
  <p><a href="emailupdates.asp">Stay in touch by email</a></p>
</div>

<div id="maincontent">

  <!-- #BeginLibraryItem "/Library/subnav_supportpages.lbi" -->
  <div id="subnav">
    <a href="support.asp">Why Support IHEA </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="donations.asp">Online Donations</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="volunteer.asp">Volunteering</a>
  </div>
  <!-- #EndLibraryItem -->
  <p>Thank you <strong></strong>.<br>
  Your message has been received and we will respond as soon as possible
  Your message has been received and we will respond as soon as possible
  Your message has been received and we will respond as soon as possible
  Your message has been received and we will respond as soon as possible
  Your message has been received and we will respond as soon as possible
  Your message has been received and we will respond as soon as possible
  Your message has been received and we will respond as soon as possible
  Your message has been received and we will respond as soon as possible
  Your message has been received and we will respond as soon as possible
  Your message has been received and we will respond as soon as possible
  Your message has been received and we will respond as soon as possible
  Your message has been received and we will respond as soon as possible
  Your message has been received and we will respond as soon as possible
  Your message has been received and we will respond as soon as possible
  Your message has been received and we will respond as soon as possible
  Your message has been received and we will respond as soon as possible
  Your message has been received and we will respond as soon as possible
  Your message has been received and we will respond as soon as possible
  Your message has been received and we will respond as soon as possible
  Your message has been received and we will respond as soon as possible
  Your message has been received and we will respond as soon as possible
  Your message has been received and we will respond as soon as possible
  Your message has been received and we will respond as soon as possible
  Your message has been received and we will respond as soon as possible
  Your message has been received and we will respond as soon as possible
  Your message has been received and we will respond as soon as possible
  Your message has been received and we will respond as soon as possible
  Your message has been received and we will respond as soon as possible
  Your message has been received and we will respond as soon as possible
  Your message has been received and we will respond as soon as possible</p>

</div>


<!-- #BeginLibraryItem "/Library/footer.lbi" -->
<div id="footer">
  <hr color="#999" width="95%">
  <script language="JavaScript" type="text/JavaScript">
  <!--
  <!-- for spam proofing the mailto link --->
  function mailmewebmaster(text) {
  var myname="webmaster";    // CHANGE this to your actual username
  var myhost="ihea.info?subject=to webmaster at IHEA"; // CHANGE this to the name of your mail server
  var myaddy=myname+"@"+myhost;
  document.write("<a href=\"mailto:"+myaddy+"\">"+text+"</a>");
  }
  //-->
  </script>
  <p>&copy; 2004, International Health Education Alliance (IHEA). All Rights Reserved.</p>
  <p>Please report technical problems and suggestions to the
  <SCRIPT language="javascript">
  <!--
  mailmewebmaster("webmaster");
  // -->
  </script></p>
  <p>Web development by <a href="http://www.saneplanet.com">SanePlanet.com </a></p>
</div>
<!-- #EndLibraryItem -->

</body>
</html>

Thanks,
Sean
0
 
LVL 18

Expert Comment

by:bruno
ID: 10734793
you would want it to be position: relative

however, that doesn't work again because it is only relative to the other stuff that is position: relative, and not the stuff that is positioned absolutely.  the stuff that is positioned absolutely is taken out of the flow of your document.  

I am going to guess that this won't be possible without some sort of javascript to dynamically move the footer down the page as the user scrolls down.


bruno
0
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
LVL 31

Expert Comment

by:seanpowell
ID: 10734831
I'm thinking you missed my post :-)
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10734869
Actually this is a good page for describing relative and absolute positioning...

The banner needs "relative" in order for the ul list inside it to be positioned "absolutely" within it. Without "relative" the list would end up at the bottom of the page.

The main content hower, doesn't need relative because that's the default. As long as it's in the right place in terms of the document code, it will flow naturally under the header.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10734921
>>the stuff that is positioned absolutely is taken out of the flow of your document.  

Unless it's in a relatively positioned container...

It's confusing - just want to make sure polaatx is following this madness called CSS :-)
0
 

Author Comment

by:polaatx
ID: 10735390
Sean,

I am going through the code. I hesistate to just take your code and drop it in because then I don't learn anything. So I am going through it line by line and then changing my own code accordingly.

Quick questions:

1. Why did you change the L & R margins on the containers to 20px from 2%? I use percentage in such cases to make the margin more consistent with various window sizes and resolutions.

2. Also the other thing was that you took out the absolute positioning for #maincontent and added the setBottom script. But I changed me code accordingly and DIDN'T add the script the footer stays in the bottom. So what's the purpose the script? (I always prefer the least amount of reliance on javascript, thinking of 5 to10% of people out there that have it disabled).

If I missed another change you made, please let me know.

thanks for all the work. polaatx.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10735504
No worries...

1. Why did you change the L & R margins on the containers to 20px from 2%? I use percentage in such cases to make the margin more consistent with various window sizes and resolutions.

My fault - I was just using it for testing purposes because I was repositioning the content - but, on small screens, 2% can get pretty small, so even cross-broswer I set margins at a fixed value out of habit. That way I maintain the look no matter what the screen size. I prefer to let the "internal" content adjust, as opposed to the page setup itself. But totally up to you :-)

2. Also the other thing was that you took out the absolute positioning for #maincontent and added the setBottom script. But I changed me code accordingly and DIDN'T add the script the footer stays in the bottom. So what's the purpose the script? (I always prefer the least amount of reliance on javascript, thinking of 5 to10% of people out there that have it disabled).

When you set the maincontant as absolute, you take it out of the flow because it's not in another relative positioned div.
If you set it to relative, then the footer will automatically appear below it, no matter how much content there is. The only reason for the script at this point is if the page is "really" short, in which case the footer would be half way up the page - so it's just an extra safety measure...

So all I've done - other than not explaining myself *grin*:
1. Moved your maincontent below the sidebar code in the page.
2. Changed the maincontent by removing it's absolute positioning. It's just set with a left, top, and right margin now.
3. Removed the position, bottom, left and width attributes from the footer.

Sean
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 500 total points
ID: 10735527
One other thing with regards to the % on the margins.

The main content now is set a specific distance from the left and the right. I don't want that to change depending on the screen, and using pixels allows for that. If you use percentages, then you need percentages on the maincontent margins - which is not as reliable...

Again, we're letting the "internal" content reflow, not the setup of the page...
0
 
LVL 18

Expert Comment

by:bruno
ID: 10736268
seanpowell,

> I'm thinking you missed my post :-)


yes, and i didn't have the time to recode for him...
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10736334
Then I need to hire you so you will have the time - and then we could chat more often :-)
0
 
LVL 18

Expert Comment

by:bruno
ID: 10736855
heh...sure as long as you buy the anti freeze at happy hour...  :-)
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Changing way home page shows 2 37
Input box width 6 32
Add shadow behind div 5 25
100% tall div not scrollable on iPhone 3 20
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

827 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