Positioning a footer at the bottom of a page

Forum Moderators: not2easy

Message Too Old, No Replies

Positioning a footer at the bottom of a page

1337Mac

5:37 am on Apr 7, 2009 (gmt 0)

I was wondering what the right way is to position a footer or similar element at the bottom of a page so that I will always be the bottom-most thing on the page. I'm not talking about fixed positioning, because that would mean it would be at the bottom even when the page is scrolled all the way to the top. I mean something like the coral in this example:
[csszengarden.com...]

I don't have a huge monitor to test this on, but it looks as if even if you stretched this page vertically indefinitely it would keep the coral at the bottom. That's what I want to do with a footer.

Kings on steeds

12:03 pm on Apr 7, 2009 (gmt 0)

if your page has a height, then a "position: absolute; bottom: 0px;" will force it to the bottom of that height, not the bottom of there screen. they way they have done it on zen garden is just by using its own relative position, it appears after container which has its own height, so it just site below that (if you are floating you need to clear before your page will have a height, then it should just sit)

1337Mac

5:45 pm on Apr 7, 2009 (gmt 0)

Thanks Kings!
That makes sense.

So would "position: absolute; bottom: 0px;" ensure that it would look good even on large monitors?

Since the footer I'm making will be part of a template for many pages on the site I want to ensure that for pages with little content there will not be a gap between the footer and the bottom of the browser window, if you get what I mean.

Kings on steeds

11:53 am on Apr 8, 2009 (gmt 0)

yer there wont be with this, but you need to make sure your main content container has a height (e.g. is not floated)

idfer

5:18 pm on Apr 8, 2009 (gmt 0)

I got this from another site (<snip>), and watered it down to the absolute necessary for positioning a footer at bottom of page. I haven't fully tested it yet, but thought it might help you:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body {
margin-top: 0;
margin-bottom: 0;
}
body, html {
height: 100%;
}
</style>
</head>
<body>
<div style="min-height: 100%; _height: 100%">

<div style="padding-bottom: 5em">
<div style="float: left">
<h1>Footer at Bottom</h1>
<img src="blank.gif" width="500" height="90" border="1">
</div>
<div style="clear: both"></div>
</div>
</div>

<div id="footer" style="margin: 0; height: 5em; margin-top: -5em">
<div style="clear: both"></div>
<p style="margin: 0">This is our footer</p>
</div>
</body>
</html>

[edited by: swa66 at 5:30 pm (utc) on April 8, 2009]
[edit reason] No URLs please see ToS and forum charter [/edit]