14 replies [Last post]
JmaJeremy
Offline
Regular
Montreal, Canada
Last seen: 11 years 46 weeks ago
Montreal, Canada
Timezone: GMT-5
Joined: 2009-11-25
Posts: 12
Points: 15

What I'm trying to do is position a footer at the bottom of my page using CSS. I tried using 'position: absolute' but all that does is place the footer at the bottom of the browser window, so if the page is longer than the person's window, then the footer ends being only partway down the page.

For example, this CSS ID:

#footer {
	clear: both;
	margin: 0;
	padding: 0;
	border: 0;
	text-align: left;
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 18px
}
 
.extra {
	  padding: 0.5em;
	  background-color: #CBA;
	  color: #CBA;
}

And a example of a corresponding XHTML footer:

<div id="footer">
    <a href="http://validator.w3.org/check?uri=referer"><img class="extra"
        src="http://www.w3.org/Icons/valid-xhtml10-blue"
        alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
    &nbsp;&nbsp; &copy; Jeremy 2009
</div>

I know it might be possible to put it inline with the rest of the page and have it automatically appear after all the other text, but the problem is that it's contained in a separate file from my content, along with all my header and navigation elements, and i want to avoid creating a special file just for the footer.

I read somewhere about using "wrappers" and such, but it seemed like it was over-complicated for what I want to achieve. I just want to push everything in #footer to the absolute bottom of the page, regardless of the size of the browser window.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 15 hours ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2050
Points: 2282

Is this what you are looking

Is this what you are looking for: http://www.cssstickyfooter.com/

JmaJeremy
Offline
Regular
Montreal, Canada
Last seen: 11 years 46 weeks ago
Montreal, Canada
Timezone: GMT-5
Joined: 2009-11-25
Posts: 12
Points: 15

Interesting, but not working for me

It seems like an interesting possibility, but that would require that the actual footer HTML be inline with the rest of the document for it to actually work.

What I want to do is this:

<body>
<div id="navigation">
    link 1
    link 2
    ...
</div>
<div id="footer">
    Copyright...
</div>
<div id="content">
    Page content goes here
</div>
 
/* Footer appears here, even though it was actually described before the content */

Is this possible, or will I have to actually have to put the footer in a separate file and call it at the bottom?
My actual source code looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php require($DOCUMENT_ROOT . "header.php"); ?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Home :: Jeremy</title>
<link rel="stylesheet" type="text/css" href="<?php cssSelect(); ?>" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
 
<?php require($DOCUMENT_ROOT . "nav.php"); ?>
 
<div id="content">
    ........
</div>
 
</body></html>

And "nav.php" looks like this:

<div id="navigation">
	<ul>
		<li><a href="index.php">Home</a></li>
		<li><a href="foo.php">Food</a></li>
		<li><a href="bar.php">Bar</a></li>
		<li><a href="contact.php">Contact Me</a></li>
	</ul>
</div>
<div id="footer">
	&copy; Jeremy 2009<br />
    <a class="extra" href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10-blue"
        alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
</div>

And you can see the relevant CSS in my first post.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 15 hours ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2050
Points: 2282

Is there a reason your footer

Is there a reason your footer is before the content? The only reason I can see a reason for that is if the footer is part of a floated sidebar. Just wondering.

Is this a wordpress theme and can you show a link?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Doesn't look like WP

Doesn't look like WP code.

Source ordering of markup has always been a contentious area, never really proven one way or another in terms of benefits, simply resting on the argument that content high up the page is always best, but it really depends on what the page contains, links and navigation are also important for search engines.

In the case of a footer I simply can't really see any point at which one would desire this element at any other position than the markup end; otherwise give it a different name please as semantically 'footer' becomes somewhat daft and misleading. If it is part of the sidebar then that only needs to be visual it doesn't and perhaps shouldn't be physically written to the sidebar element.

With the footer last in the flow the sticky footer technique is the best that has been devised to date.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 15 hours ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2050
Points: 2282

Yes, source ordering of

Yes, source ordering of content before menus may have some mild point even though it's considered dubious by many but I can see no reason whatsoever to source order the footer before the content.

Just go with the normal document flow as stated by Hugo.

JmaJeremy
Offline
Regular
Montreal, Canada
Last seen: 11 years 46 weeks ago
Montreal, Canada
Timezone: GMT-5
Joined: 2009-11-25
Posts: 12
Points: 15

Now the page is too long

Ok, I tried out the sticky footer. I set it up so that my footer is actually sourced below the content, and it now resembled this:

<div id="wrap">
     <div id="main" class="clearfix">
          <h1>Loreum Ipsum</h1>
          <h2>Dolor Sit Amet</h2>
          <div id="navTop">
               .......
          </div>
          <div id="navLeft">
               .......
          </div>
          <div id="navRight">
               .......
          </div>
          <div id="content">
               <p>blah blah blah</p>
          </div>
     </div>
</div>
 
<div id="footer">
     copyright...
</div>

The problem now is that the footer is too low! I played around with the height setting in the sticky footer code, but the footer now rests just below the bottom edge of the browser, even if there's hardly anything else on the page, and this means there will always be a scroll bar and users have to scroll down to see the footer.
So...what's the solution?

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 15 hours ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2050
Points: 2282

You're going to have to show

You're going to have to show a link.

JmaJeremy
Offline
Regular
Montreal, Canada
Last seen: 11 years 46 weeks ago
Montreal, Canada
Timezone: GMT-5
Joined: 2009-11-25
Posts: 12
Points: 15

Verschwindende wrote:You're

Verschwindende wrote:

You're going to have to show a link.

Sure:

http://canada.webhop.org/

CSS is at http://canada.webhop.org/travel.css

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 15 hours ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2050
Points: 2282

...

From cssstickyfooter.com:

Quote:

/* must declare 0 margins on everything, also for main layout components use padding, not vertical margins (top and bottom) to add spacing, else those margins get added to total height and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

JmaJeremy
Offline
Regular
Montreal, Canada
Last seen: 11 years 46 weeks ago
Montreal, Canada
Timezone: GMT-5
Joined: 2009-11-25
Posts: 12
Points: 15

Hm... I went in and set all

Hm... I went in and set all my margins to 0, but it's still doing the same thing... http://canada.webhop.org/road.php is the best example.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 15 hours ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2050
Points: 2282

Next try taking the absolute

Next try taking the absolute positioning, left and bottom out of the footer definitions. Zero out the body padding (at least the top and bottom). Make the footer at least as high as it's content (as it stands the image is 31px high with the footer being 20px high).

JmaJeremy
Offline
Regular
Montreal, Canada
Last seen: 11 years 46 weeks ago
Montreal, Canada
Timezone: GMT-5
Joined: 2009-11-25
Posts: 12
Points: 15

I tried what you said,

I tried what you said, Verschwindende, and it helped a little bit, but it still doesn't quite get rid of the scroll bar.
Also, this is how my site looks now: http://canada.webhop.org/road.php
And this is how I want it to look: http://canada.webhop.org/v2/road.php

You'll notice that because I had to take away all the margins...well, all margins are gone, and it doesn't look too good. Someone said to use padding instead, but I don't understand how padding can take the place of margins... is there somehow I can get it back to looking how I want it to using only padding?

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 8 weeks 15 hours ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2050
Points: 2282

There is no scroll bar as

There is no scroll bar as long as there is 60px available below the menu on the right. Seems to work as expected. To get the body padding at the top and bottom, you're just going to have to play with the settings, instead of using em or % be sure to use px and compensate with the negative margin of the footer. In this case I don't think it's worth the trouble just to get the simple footer stuck to the bottom.

If it were me I'd just stick it at the end of the page and let it fall where it may.

JmaJeremy
Offline
Regular
Montreal, Canada
Last seen: 11 years 46 weeks ago
Montreal, Canada
Timezone: GMT-5
Joined: 2009-11-25
Posts: 12
Points: 15

Ok, well thanks for all the

Ok, well thanks for all the help guys. I should be good now.