CSS Footer...

Adam

Hey guys, I'm hoping someone can help here but being new to CSS I'm not sure it will be possible! I have a page layout in the format of a full width header, a thin left column, main content in the middle and a thin right column, I would like to be able to stick a footer on too, but I cant get it to stick to the bottom of the page depending on the length of the page i.e. whether it scrolls or not. Here's the CSS:

#header{
 position:relative; 
 width:100%;
}

#navbartop{
 position:relative; 
 top:0;
 width:100%;
} 
 
#leftcol{
 top:40px; 
 float:left;
 position:relative; 
 }
 
#maincol{
 top:70px;
 position: relative;
 }

 #rightcol{ 
 top:40px;
 float:right;
 position:relative; 
 
 }

Ph3n0m

http://alistapart.com/articles/footers

this should help

vito

Add

#footer {
clear: both;
}

to the CSS and you should be ready to go.

your using floats to get the left, right and center columns.

Adam

It seems a combination of both would be best but I just cant get it.

The div layout is like this:

[html]
<div id="header">

<div id="navbar">...</div>
...
</div>

<div id="leftcol">...</div>

<div id="rightcol">...</div>

<div id="maincol" align="center">...(usually contains tables)...</div>

<div id="footer" align="center">...</div>
[/html]

Nav bar looks like

#navbartop{
 position:relative; 
 top:0;
 width:100%;
}