Link to home
Start Free TrialLog in
Avatar of polaatx
polaatxFlag for United States of America

asked on

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

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.
Avatar of polaatx
polaatx
Flag of United States of America image

ASKER

Increasing points.
Avatar of seanpowell
seanpowell
Flag of Canada image
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
Avatar of bruno
bruno
Flag of United States of America image
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
Avatar of seanpowell
seanpowell
Flag of Canada image
I'm thinking you missed my post :-)
Avatar of seanpowell
seanpowell
Flag of Canada image
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.
Avatar of seanpowell
seanpowell
Flag of Canada image
>>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 :-)
Avatar of polaatx
polaatx
Flag of United States of America image

ASKER

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.
Avatar of seanpowell
seanpowell
Flag of Canada image
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
ASKER CERTIFIED SOLUTION
Avatar of seanpowell
seanpowell
Flag of Canada image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of bruno
bruno
Flag of United States of America image
seanpowell,

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


yes, and i didn't have the time to recode for him...
Avatar of seanpowell
seanpowell
Flag of Canada image
Then I need to hire you so you will have the time - and then we could chat more often :-)
Avatar of bruno
bruno
Flag of United States of America image
heh...sure as long as you buy the anti freeze at happy hour...  :-)