Solved

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

Posted on 2013-06-26
5
274 Views
Last Modified: 2013-07-05
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

0
Comment
Question by:brucegust
  • 4
5 Comments
 
LVL 7

Expert Comment

by:dimmergeek
ID: 39279493
Make your footer position absolute as opposed to relative
0
 

Author Comment

by:brucegust
ID: 39281362
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
 
LVL 7

Expert Comment

by:dimmergeek
ID: 39281430
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
 
LVL 7

Accepted Solution

by:
dimmergeek earned 500 total points
ID: 39281473
Sorry....try this:

position:fixed;
padding: 10px 0px 10px 0px;
bottom:0px;
0
 
LVL 7

Expert Comment

by:dimmergeek
ID: 39302631
Thanks!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

919 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now