footer with variable page length

footer

[rantastic]

Hey all,

I have been having trouble with keeping the footer at the bottom for a page I'm creating. I have two columns on the page which vary in length based on user input,(php & mysql for content) and every footer code I have tried will not account for this. I guess the method I use for the columns might be bad as well since I don't define the height (I dont know how long it will end up being!). Any help would be greatly appreciated.

#column2{
position: absolute;
margin-left: 285px;
width: 250px;
background-color:#990000;
padding:15px;
height:100%;
}

#footer {
position:fixed;
bottom: 0px;
width: 100%;
font-size:10px;
background-color:#333333;
color:#FFFFFF;
}

Thanks,
Bill

[DrDoc]

Welcome to WebmasterWorld!

Usually, what I do is something like this:

#content { 
  min-height: 100%; 
} 
#adjuster { 
  height: 50px; 
} 
#footer { 
  height: 50px; 
  margin-top: -50px; 
}

---

<div id="content"> 
  <!-- main content goes here --> 
  <div id="adjuster"></div> 
</div> 
<div id="footer"> 
  <!-- footer content goes here --> 
</div>

This way, the content area is always at least the full height of the page, with the footer at the bottom. If the page is longer, the footer still stays at the bottom, and without overlapping content.

[edited by: DrDoc at 4:46 pm (utc) on Aug. 1, 2008]