How do I make my CSS footer position automatically at bottom?

[2levelsabove]

Please see <snip>

As you can see the footer only moves down if there is content in middle div.

I have tried enclosing all the divs in a master container div but that doesn't seem to work.

Any ideas?

Thanks

body{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
margin:0;
padding:0;
}
input
{
background: #CCCCCC;
border: 2px solid #003399;
}
#maincontainer{
}
#lh-col{
 position:absolute;
 top:127px;
 left:0;
 width:180px;
 z-index:3; 
 background:#4a7bb5;
 color: #333333;}
#rh-col{
 position:absolute;
 top:127px;
 right:0;
 width:180px;
 z-index:2; 
 background:#4a7bb5;
 color: #333333;}
 
 #c-block {
 width:100%;
 /* z-index:1; */
 background:#4a7bb5;
 color: #333333;
 height:80%;}
 
 #c-col{
 margin:0 182px 0 182px;
 position:relative;
 background:#ffffff;
 color: #333333;
/* z-index:5; */
 border: solid #000000;
 border-width:0 1px;
 }
#hdr{
 height:125px; 
 border-bottom:1px solid #000000; 
 width:100%; 
 background:#4a7bb5;
 color: #333333; 
 margin:0;
 }
 
#hdrimage{
 width:100%;
height:100px;
background: #73a0c5 url('/images/logo.jpg') no-repeat;
}
#ftr {
 width:100%;
 height:35px;
 border: solid #000000; 
 border-width:1px 0;
background: #3B5998;
color:#CCCCCC;
text-align: center;
 margin:0;
 }
 
 
#ftr a{
color:#ffffff;
}
img{ border-style:none;
max-width: 600px;
}
b{font-size: 110%;}
em{color: red;}
.category_header {
font-size: 12px;
font-weight: bolder;
color:#FFFFFF;
background-color:#3B5998;
text-align:center;
}
.category_header a {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.category_listing {
font-size: 12px;
color: #006699;
}
a {
 font-family:Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 10px; color: #006699;
}
h1 {
font-size:20px;
}
h2 {
font-size:18px;
}
a:hover {text-decoration: underline; color: #006699;}
.form_text {
font-size: 14px;
}
.bold_red {
font-size: 16px;
font-weight: bold;
color: #FF0000;
}
.latest_rides{ 
}
.latest_rides a {
font-family:Arial, Helvetica, sans-serif;
font-size:70%;
font-weight:bolder;
}
.viewlisting_header_text{font-size:10px;
font-weight:bolder;
}
.news_column a {
}
.greenmoney {
color: #009900;
font-size:12px;
}
.columnText {
font-size:12px;
}
.columnTextSmall {
font-size:9px;
}
.topnavlinks {
color:#000000;
}
.didyouknow{color:#FF6600;
font-stretch:semi-expanded;
font-weight:700;
}
.vin {
font-size:16px;
font-weight:bold;
}
.largewideorange{color:#FF6600;
font-stretch:semi-expanded;
font-weight:bolder;
font-size:16px;
}

[edited by: eelixduppy at 12:31 am (utc) on Feb. 13, 2009]
[edit reason] no URLs, please [/edit]

[swa66]

From a cursory glance at the code: you're using absolute positioning on columns, without setting a height.

That's going to be very hard to put a footer under them.

An absolute positioned element is completely out of the flow, not interacting with it at all. Hence you can't just find the bottom edge of it and position something else depending on that (at least not using just CSS).

So how do other solve this:
float one of the columns, (or both if you feel like it), and give your footer a "clear:both" property so it stay under the floated elements