Footer - align at bottom of page regardless of resolution

I am playing around with a site design for a client and would like to have a footer appear at the bottom of the screen regardless of the screen resolution.

The page: http://69.5.2.188/

As you can see, I have done an outline with tables. I would like to move to CSS for positioning, but as this site will have phpBB forums and Photopost image galleries, there seems little point in creating two different templates - one with tables for the software mentioned and another template for the rest of the site.

Anyway, this 45 pixel high footer at the bottom of this page looks ok at 800x600 resolution, but at a higher resolution of course it moves up or down depending on the content of the page.

Is there a simple way to use CSS and have the footer appear at the bottom of the screen at a higher resolution?

Thanks for any help!

I don’t know how well supported this is, but you can use…


.footer {
  position:absolute;
  width:100%;
  height:45px;
  left:0;
  bottom:0;
}

The other option is to use DHTML.

Here’s an experiment…


<html>
<head>
<style type='text/css'><!--
html {
  margin:0;
  padding:0;
}
body {
  color:#000;
  background:#fff;
  margin:0;
  padding:0;
  font-family:verdana,arial,sans-serif;
  font-size:12px;
}
#top {
  position:absolute;
  width:100%; height:45px;
  color:#fff; background:#cc9;
  margin:0; padding:10px;
  left:0;
  top:0;
  z-index:2;
}
#left {
  position:absolute;
  width:100px; height:100%;
  color:#fff; background:#9cc;
  margin:0; padding:10px;
  left:0;
  top:0;
  z-index:1;
}
#middle {
  color:#000; background:#fff;
  margin:45px 100px;
  padding:10px;
}
#right {
  position:absolute;
  width:100px; height:100%;
  color:#fff; background:#9cc;
  margin:0; padding:10px;
  right:0;
  top:0;
  z-index:1;
}
#bottom {
  position:absolute;
  width:100%; height:45px;
  color:#fff; background:#cc9;
  margin:0; padding:10px;
  left:0;
  bottom:0;
  z-index:2;
}
--></style>
</head>
<body>

<div id='top'>top</div>
<div id='left'>left</div>
<div id='middle'>middle</div>
<div id='right'>right</div>
<div id='bottom'>bottom</div>

</body>
</html>

Yeah, problem is you’ll tend to have your bottom content either get hidden, or hide something else, if you have more content than screen room.

You’re right, Jeremy. It’s better to position the footer at the bottom of the main content element - where-ever that might be.

Here’s what I did:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>JobCave.com - freelance jobs</title>
<style>
body,td  { font-family: arial, helvetica; font-size: smaller; }
A, A:link, A:active, A:visited
{
 color: #000; 
}
#logo
{
 position: absolute;
 left: 15;
 top: 15;
}
#menuwrapper
{
 position: absolute;
 top: 92;
}
#menu
{
 position: relative;
 font-size: smaller;
 padding: 5px 2px 2px 2px;
 display: block;
 width: 100;
}
#menu, #lightbrown
{
 background-color: #BC9752;
}
#lightgreen, #topcell
{
 background-color: #9C9E8C;
}
#contentwrapper
{
 width: 406;
 position: absolute;
 top: 92;
 left: 135;
}
#content
{
}

#footer
{
 width: 406;
 position: relative;
 text-align: center;
 top: 25;
}
#topcell, #botcell, #footer
{
 border-color: #000;
 border-style: solid;
 border-width: 2px 2px 2px 2px;
 padding: 5px;
}
#topcell
{
 border-bottom-width: 0px;
 font-weight: bold;
 font-size: 1em;
 text-align: center;
}
#botcell, #footer
{
 border-bottom-width: 2px;
 margin-bottom: 15px;
 background-color:#C7C8BD;
}
#adwrapper
{
 width: 150;
 position: absolute;
 top: 92;
 left: 565;
}
#ad
{
 padding: 4px;
 border-width: 2px;
 border-style:solid;
 border-color:#000000;
 font-size: smaller;
 background-color: #CB6B51;
 width:150;
 margin-bottom:15px;
}
</style>
</head>
<body background="images/background.jpg">
<a href="index.php"><img border="0" src="images/logo.gif" align="left" height="67" id="logo"></a>
<div id="menuwrapper">
<a href="index.php" id="menu">Homepage</a><br />
<a href="dispprojects.php" id="menu">Find a project</a><br />
<a href="postproject.php" id="menu">Post a project</a><br />
</div>
<div id="contentwrapper">
 <div id="content">
  <div id="topcell">
   Get what you want!
  </div>
  <div id="botcell">
   JobCave.com gives you exactly what you want whether you are a job hunter, an employer or a webmaster of another job site!
  </div>
  <div id="topcell">
   The Site
  </div>
  <div id="botcell">
   JobCave.com is just about ready to launch, we just have a few more code changes to make!
  </div>
  
  <div id="topcell">
   Keeping it simple!
  </div>
  <div id="botcell">
   JobCave.com keeps it simple. No massive registrations, no lengthy
   approval processes and no need to upload your resume. You look for
   jobs and contracts and you apply for them. Done and end of story!
  </div>
  <div id="topcell">
   The Newsletter
  </div>
  <div id="botcell">
   The JobCave.com newsletter is a simple way for you to get daily
   updates on the new jobs. That way if you don't want to take time 
   out of your day to visit the site, you don't have to. Keeping it    simple.
  </div>

 </div>
<div id="footer">
 This site, the logo and the "Keeping It Simple!" byline are copyrighted. This is an  <a href="<A href="http://www.thenmcgroup.com">http://www.thenmcgroup.com" target="_blank">NMC Group, Inc.</a> Project.
</div>
</div>

<div id="adwrapper">
 Sponsored Links:<br /><br />
 <div id="ad">
  <a href="<A href="http://www.thencgroup.com">http://www.thencgroup.com" target="_blank">NMC Group, Inc.</a><br />
  The parent company of this website, we specialize in creating and marketing succesful web
  properties.
 </div>
</div></body>
</html>

Basically, have a content and menu wrapper, to ensure that each element within it conforms to what I’m looking for. I’m happy with the results as well :slight_smile:

J

Very nice!

Thanks for the help! I am not really following the last example though - new to CSS positioning.

What is the simplest way of getting a footer to appear at the bottom of the page, regardless of the length of content in the main content div?

This is great for learning - only problem is I have a deadline and need to get going…!

I’m not having any luck trying a pure css layout like your table layout. However, it’s pretty easy using dhtml. Have a look at this demo. Resize the window and watch everything auto-adjust. Add more text to the news or more sections and everything auto-adjusts.

Mike, thanks so much for taking the trouble to help! I am very impressed with your example - only problem is it does not quite work when re-sizing a window…I just tested briefly in Mac Safari and Mac IE 5.22, and the blue footer moves up and down.

I have been working on a more fluid footer in pure CSS as opposed to having it absolutely on the bottom at only 25px high. Instead I have been looking at making the body BG the same colour so it doesn’t matter if the resolution is higher.

Still working on it, but struggling…tables are easier for positioning but CSS is worth the struggle to learn…

Sorry about that. I don’t have a Mac to test on.

BTW, it’s not supposed to put the footer at the bottom of the window - it’s just positioned at the end of the content elements. Of course, it could be changed so that the footer is positioned at the end of content or at the bottom of the window (if there’s not enough content)… but this was just a quick example.

Thanks again for the example. Sorry, I thought it was supposed to go to the bottom of the window rather than at the end of the content box. Is that hard to change?

How would this design work if the user has Java Script turned off? That was the main reason why I wanted to move to pure CSS - simplicity, standards and not affected by what the user has or doesn’t have.

I need to get a Windows machine for testing!

It doesn’t sound like you want to use DHTML. That’s ok. But have another look - It’s downgradable now.

That’s fantastic Mike! Very educational…

This project is for a school that wants the site up by this weekend. They also wanted the site to be viewable in old browsers like Netscape 4x, so it has to be downgradable.

I wanted to do the site in pure CSS (first time) if I could, but I don’t have enough time for that as the deadline is pressing and I have to do their CMS as well.

For sure the next project will be in CSS and/or DHTML - have to learn more about JavaScript…