How do I make a CSS footer that stays at the bottom of the page when the content of the page is too short. And it will shift to the bottom of the content when the content is longer than the page.

#Content {
margin:0px 50px 50px 200px;
padding:10px;
}

#Menu {
position:absolute;
top:100px;
left:20px;
width:172px;
padding:10px;
background-color:#eee;
border:1px dashed #999;
line-height:17px;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:150px;
}
#Footer {
font-size:10px;
background-color: #eee;
width: 100%; /* See note below */
text-align: left;
padding:10px 0px 0px 0px;
margin:0px 0px 0px 0px;
/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
border-style:solid;
border-color:black;
border-width:1px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
line-height:11px;
background-color:#eee;
}

The problem I have now is that whenever the content is too short... The menu will overlap the footer. When the put the footer to absolute, the footer won't flow with the content. It will be smack right in the middle...

You could try using <div> layers instead. See Lissa's tutorial at http://www.lissaexplains.com/html7.shtml

Good Luck,
Andy Fraser.

Ok, let me put it more clearly...

I have 2 main components in my page. The left menu bar and the content section.

My left menu bar is on absolute position. So, it is floating.

And my content section is positioned using CSS.

My problem now is that when the stuff inside the content section is too short, the footer I added at the end will get blocked by the left menu bar, which is floating above it.

So now how do I position my footer to appear after the left menu bar or the content section, depending on which one is longer.

And can someone explain to me what does this mean?
body>#Menu {width:150px;}

And I did some changes to my CSS since the last I posted.
So, here it goes...

#Content {
margin:0px 50px 50px 200px;
padding:10px;
}

#Menu {
position:absolute;
top:240px;
left:15px;
width:172px;
padding:10px;
background-color:#eee;
border:1px dashed #999;
line-height:17px;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:150px;
}

}
#Footer {
font-size:11px;
background-color: #eee;
text-align: left;
padding:0px 0px 0px 50px;
margin:1000px 0px 0px 0px;
border-style:solid;
border-color:black;
border-width:1px 0px;
line-height:11px;*/
}

Anyone can help me?