Position floating html / css footer at bottom of page or bottom of screen, whichever is further?

The snip shows a footer div and associated css that displays a 'pretty' footer with various links. The footer is floating and appears at the bottom center of the browser window and repositions when the windows dimensions change.

However, if the particular page has more content it extends right through the footer and on down.

The footer should appear right below the content div, but on screens with little content, never higher than the bottom of the screen.

I can get the effect by making sure the content div is always tall enough, by working on every page, and letting the footer fall right below it, but this is a pain to think of on every page. And it isn't very elegant.

f I take away the absolute positioning and just plop the div after the content then it looks perfect on pages with lots of content but pages with just a few lines, the footer can be almost at the top of the page.

The environment is VS '08 and the app is asp.net with a master page. The answer must be standards based, not specific to a particular browser.

I'll be annoyed but grateful if the answer is one tiny little setting.

The footer, taken from MasterPage.master
 
<div id="footer" class="FooterText">
  <br />
  &copy; 2008 AcmeProducts, Inc. All rights reserved. | (800) 000-0000 | <a href="privacy.html">Privacy/Legal</a><br />
  We welcome your site <a href="mailto:webmaster@acmeproducts.com?subject=Website Feedback">feedback</a>. Please send us your questions and/or comments.<br />
  <br />
  <a href="http://www.section508.gov" target="_blank">
    <img src="images/colophon_sec508.gif" alt="This site conforms to the US Government Section 508 Accessibility Guidelines" /></a>&nbsp;&nbsp;
  <a href="http://www.w3.org/WAI/WCAG1AA-Conformance" target="_blank">
    <img src="images/colophon_wai-aa.gif" alt="This site conforms to the W3C-WAI Web Content Accessibility Guidelines" /></a>&nbsp;&nbsp;
  <a href="http://validator.w3.org/check/referer" target="_blank">
    <img src="images/colophon_xhtml.png" alt="This site is valid XHTML" /></a>&nbsp;&nbsp;
  <a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">
    <img src="images/colophon_css.png" alt="This site was built with valid CSS" /></a>&nbsp;&nbsp;
  <img src="images/colophon_anybrowser.png" alt="This site is usable in any web browser" />
</div>
 
And the css that shapes it:
 
.FooterText 
{
	text-align:center;
	position:absolute;	
	bottom:12px;
	font-size:11px;
	font-weight:normal; 
	text-decoration:none; 
	font-family:Verdana; 
	margin-top:10px;
	margin-left:0px; 
	margin-bottom:2px; 
	padding:0px; 
	color:#999999; 
	white-space:nowrap;
	width:100%;
}
 
.FooterText img { border-style: none; }
.FooterText A:link { font-weight:normal; color:#999999; text-decoration:underline; }
.FooterText A:visited { font-weight:normal; color:#999999; text-decoration:underline; }
.FooterText A:active { font-weight:normal; color:#999999; text-decoration:underline; }
.FooterText A:hover { font-weight:normal; color:#FF6600; text-decoration:underline; }

Select all Open in new window