Solved

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

Posted on 2004-04-01
12
1,675 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
Comment Utility
Increasing points.
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
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
Comment Utility
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
 
LVL 31

Expert Comment

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

Expert Comment

by:seanpowell
Comment Utility
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
Comment Utility
>>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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 

Author Comment

by:polaatx
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
heh...sure as long as you buy the anti freeze at happy hour...  :-)
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

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…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
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…

763 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

10 Experts available now in Live!

Get 1:1 Help Now