Why will this footer not remain consistently at the bottom of the page?

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:

lousy footer
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.

good footer
Here's my stylesheet:

html {
height: 100%;
}

body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   height:100%;
   position:relative;
}
#header {
   background:#fff;
   padding:10px;
}
#body {
   padding:0px;
   padding-bottom:0px;   /* Height of the footer */
}
#footer {
   position:relative;
   bottom:0;
   width:100%;
   height:35px;   /* Height of the footer */
   background-color:#000000;
   clear:both;
   }

Open in new window


...and here's my HTML:

<body>
<div id="container"><div id="body">
<div id="header">
<table align="center" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top">&nbsp;<BR>
	<table width="1000" cellspacing="0" cellpadding="0">
	<tr>
	<td align="center">
	<IMG SRC="images/admin_header.jpg">
	</td>
	</tr>
	<tr>
	<td> &nbsp;<BR></div>
  <!--whatever content I'm displaying -->
<!-- this ends your body div--></div>
<div id="footer">
<table align="center">
<tr>
<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
</td>
</tr>
</table></div></div>
</body>
</html>

Open in new window

brucegustPHP DeveloperAsked:
Who is Participating?
 
dimmergeekConnect With a Mentor Commented:
Sorry....try this:

position:fixed;
padding: 10px 0px 10px 0px;
bottom:0px;
0
 
dimmergeekCommented:
Make your footer position absolute as opposed to relative
0
 
brucegustPHP DeveloperAuthor Commented:
Hey, Dimmer!

Your suggestion seemed to solve the scenario where I'm looking at my login page, but as soon as I implemented it where I'm displaying a large amount of data that extends beyond the fold, I get this:

showdown dilemma
I'm still blowing it somewhere. What do you think?
0
 
dimmergeekCommented:
The table you created on line 7 in your HTML above does not seem to be closed anywhere.
Probably not the issue, but let's fix that and try.
Is this site publicly viewable, yet?
0
 
dimmergeekCommented:
Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.