[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

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

Posted on 2013-06-26
5
Medium Priority
?
288 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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

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…
This article discusses four methods for overlaying images in a container on a web page
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…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

656 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