I've got a footer that hugs the bottom of the page beautifully when I've got a maximum amount of data displayed. But when the page is fairly minimal, it's right there in the middle and I don't know how to get it consistently at the bottom.
I've got two screen shots attached. The first one is the "problem," as far as the footer being displayed at the bottom of the screen:
This next screen shot is a step in the right direction, only because some of the options I've tried seemingly positioned the footer correctly when there was a minimal amount of content displayed, but when you had a lot of data, the footer was at the bottom of the screen, but when you scrolled down past the fold, the footer would stay in the same place and effectively blocking some of the content from the user's view.
So this is correct, I just can't get it to hover on the bottom correctly when there's a minimal amount of stuff on the screen.
Here's my stylesheet:
padding-bottom:0px; /* Height of the footer */
height:35px; /* Height of the footer */
...and here's my HTML:
<div id="container"><div id="body">
<table align="center" cellspacing="0" cellpadding="0">
<td align="center" valign="top"> <BR>
<table width="1000" cellspacing="0" cellpadding="0">
<!--whatever content I'm displaying -->
<!-- this ends your body div--></div>
<td align="center" class="Footer">
<A HREF="http://www.specialpromotionsinc.com" target="_blank" class="Footer">Special Promotions Inc.</a> | 63 Music Square East | Nashville, TN 37203 | (p) 615.321.5130 | (f) 615. 320.1708