Solved

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

Posted on 2013-06-26
5
276 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

829 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