We help IT Professionals succeed at work.
Get Started

Position floating html / css footer at bottom of page or bottom of screen, whichever is further?

namedpipes asked
Last Modified: 2012-08-13
The snip shows a footer div and associated css that displays a 'pretty' footer with various links. The footer is floating and appears at the bottom center of the browser window and repositions when the windows dimensions change.

However, if the particular page has more content it extends right through the footer and on down.

The footer should appear right below the content div, but on screens with little content, never higher than the bottom of the screen.

I can get the effect by making sure the content div is always tall enough, by working on every page, and letting the footer fall right below it, but this is a pain to think of on every page. And it isn't very elegant.

f I take away the absolute positioning and just plop the div after the content then it looks perfect on pages with lots of content but pages with just a few lines, the footer can be almost at the top of the page.

The environment is VS '08 and the app is asp.net with a master page. The answer must be standards based, not specific to a particular browser.

I'll be annoyed but grateful if the answer is one tiny little setting.

The footer, taken from MasterPage.master
<div id="footer" class="FooterText">
  <br />
  &copy; 2008 AcmeProducts, Inc. All rights reserved. | (800) 000-0000 | <a href="privacy.html">Privacy/Legal</a><br />
  We welcome your site <a href="mailto:webmaster@acmeproducts.com?subject=Website Feedback">feedback</a>. Please send us your questions and/or comments.<br />
  <br />
  <a href="http://www.section508.gov" target="_blank">
    <img src="images/colophon_sec508.gif" alt="This site conforms to the US Government Section 508 Accessibility Guidelines" /></a>&nbsp;&nbsp;
  <a href="http://www.w3.org/WAI/WCAG1AA-Conformance" target="_blank">
    <img src="images/colophon_wai-aa.gif" alt="This site conforms to the W3C-WAI Web Content Accessibility Guidelines" /></a>&nbsp;&nbsp;
  <a href="http://validator.w3.org/check/referer" target="_blank">
    <img src="images/colophon_xhtml.png" alt="This site is valid XHTML" /></a>&nbsp;&nbsp;
  <a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">
    <img src="images/colophon_css.png" alt="This site was built with valid CSS" /></a>&nbsp;&nbsp;
  <img src="images/colophon_anybrowser.png" alt="This site is usable in any web browser" />
And the css that shapes it:
.FooterText img { border-style: none; }
.FooterText A:link { font-weight:normal; color:#999999; text-decoration:underline; }
.FooterText A:visited { font-weight:normal; color:#999999; text-decoration:underline; }
.FooterText A:active { font-weight:normal; color:#999999; text-decoration:underline; }
.FooterText A:hover { font-weight:normal; color:#FF6600; text-decoration:underline; }

Open in new window

Watch Question
This problem has been solved!
Unlock 1 Answer and 2 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE