Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Positioning a footer at the bottom of a page



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

5+ Year Member

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:

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)

10+ Year Member

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)


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

5+ Year Member

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)

10+ Year Member

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


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

5+ Year Member

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">
<style type="text/css">
body {
margin-top: 0;
margin-bottom: 0;

body, html {
height: 100%;

<div style="min-height: 100%; _height: 100%">
<!-- Padding-bottom is the same value as the total height of the footer -->
<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><!--style="float: left"-->

<div style="clear: both"></div>
</div><!--style="padding-bottom: 5em"-->
</div><!--style="min-height: 100%;"-->

<!-- By using a negative margin-top we move the footer up the same amount as the footer height to avoid vertical scrolling. Remember, if you use borders and padding on your footer you will have to calculate this in your negative margin-top value also. -->
<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>

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


Featured Threads

Hot Threads This Week

Hot Threads This Month