Footer that won't stay put!

**earthsusan** · Sep 18, 2003 09:57

Help - my footer is attached to the #center!

Does anyone know the trick for using CSS to get the footer to always sit at the bottom of the page rather than floating up and under any absolutely position elements? It somehow seems attached to the block div "center" even though all <div> are closed and clear: both; appears in the footer script.

I have tried everything mentioned in the other wise very helpful "HTML Utopia: Designing without Tables Using CSS" book put out by Site Point, but without success.

Thanks.

Susan

Here is the pertinent piece of CSS:

#left {position: absolute;
width: 100px;
top: 100px;
margin-left:10px;
background: white;
border: none;
padding: 5px;
float: left;
}

#center { width: 80%;
background: #fff;
padding: 15px;
margin-left: 100px;
}

#right {position: absolute;
background: white;
padding: 5px;
right: 0px;
top: 35px;
width: 140px;
margin-left: 0px;
margin-right: 0px;
border: none;
float: right; }

#footer {
clear: both;
height: 15px;
background-color: #006600;
color: white;
padding-right: 4px;
border-top: 1px solid;
padding-left: 4px;
font-size: 9px;
font-color: white;
padding-bottom: 1px;
padding-top: 1px;
border-bottom: 1px solid;
}

**krayziepjf** · Sep 18, 2003 10:08

If your footer is attached to the #center CSS id, then add to it:

Code:

 
position: absolute;
bottom: 0px;

That will always keep it at the bottom of the page.

**vgarcia** · Sep 18, 2003 12:21

Originally Posted by krayziepjf

If your footer is attached to the #center CSS id, then add to it:

Code:

 
position: absolute;
bottom: 0px;

That will always keep it at the bottom of the page.

Not if you resize your browser window. The only way to do that is to use fixed positioning, which isn't supported by IE/Windows.

**krayziepjf** · Sep 18, 2003 17:37

There isn't anyway else to do it that is IE compatible?

**irishstu** · Sep 19, 2003 00:45

i spent about 3 hours trying to find a way of doing that before i found this link:

http://www.positioniseverything.net/ordered-floats.html

**Paul O'B** · Sep 19, 2003 02:29

Hi,

If you mean you just want your footer underneath your content and not fixed to the bottom of the page then you wil need to change your layout slightly.

You have potioned your left and right columns absolutely but you have also added a float to the style. It can't be both! It is either placed absolutely or floated right or left. When you place your lement absolutely it is removed from the flow and therefore following content will ignore it and overwrite it.

If you float an element then you can get content to avoid the floats by using clear:both (or left and right). You can adust the position of the floats by using the margin property.

Using your code (with slight changes) a basic 3 column can be produced as follows.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#left {
width: 100px;
background: yellow;
padding: 5px; 
float: left; 
}
#center { 
background: #fff;
margin-right:150px;
margin-left: 130px;
}
#right {
background: blue;
padding: 5px;
width: 140px;
float: right; }
#footer {
clear: both;
height: 15px;
line-height:15px;
background-color: #006600;
color: white;
padding-right: 4px;
border-top: 1px solid; 
padding-left: 4px; 
font-size: 9px; 
} 
</style>
</head>
<body>
<div id="left">
  <p>Left</p>
  <p>&nbsp;</p>
</div>
<div id="right">
  <p>Rightu</p>
  <p>&nbsp;</p>
</div>
<div id="center">
  <p>Centre</p>
</div>
<div id="footer">Footer</div>
</body>
</html>

Hope that helps.

Paul

User Tag List

Thread: Footer that won't stay put!

Thread Tools

Display

Footer that won't stay put!

Bookmarks

Bookmarks

Posting Permissions