Footer positioning problem with CSS

greymoose · #1 (**permalink**) 08-09-06, 07:05 PM

I've got a page with two columns and a footer that I would like to spread across the bottom of the page. I can position the footer fine if I specify its top margin but that causes problems with the variable length of different pages. If I don't specify the top index the footer appears halfway down the page. I've only tried viewing it in Firefox so far.

I've been Googling for hours and tried every suggestion I could find (there are lots).
Does anyone have any suggestions as to what I may have done wrong? I've included my original code below but I can't direct you to a live site at present.

CSS:

Code:

body {
/* background-color: bf4005; */	/*maroon background*/
background-color: f8d306; /*rugby team colurs*/
height: 100%;
}

/************************* ID's *************************/

#navigation {

position: absolute;

z-index: 16;

width: 210px;

margin: 0;

margin-top: 50px;

border-right: 1px solid #1c32b5;

font-weight: normal;

}

#centerDoc {

position: absolute;

z-index: 15;

padding: 0 2px 20px 215px; /*top right bottom left*/

margin-top: 10px;

}

#footer {
position: relative;
left: 0;
bottom: 0;
width: 100%;
clear: both;
}

HTML:

Code:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
  <html>	
  <head>
  	<!-- Created by greymoose webdesign -->
	<link href="css/stylesheet.css" rel="stylesheet" type="text/css">  
  </head>
	<title>Marton Central</title>
  <body>
	<div id="navigation">
		<!--#include virtual="inserts/navbar.html" -->
	</div>
	<div id="centerDoc">
		<!--#include virtual="inserts/top.html" -->
	</div>
	<div id="footer">
		<!--#include virtual="inserts/footer.html" -->
	</div> 
</body>
  </html>

Thaks in advance for your help.

greymoose · #2 (**permalink**) 08-10-06, 12:26 AM

Ok.

I found a site where I could finally work it out from the code.

For anyone else in the same jam it can be found here .