?
Solved

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

Posted on 2013-06-26
5
Medium Priority
?
284 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 2000 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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

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 …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses
Course of the Month11 days, 1 hour left to enroll

770 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