homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Positioning a footer at the bottom of a page

5+ Year Member

Msg#: 3886903 posted 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:

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

5+ Year Member

Msg#: 3886903 posted 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)


5+ Year Member

Msg#: 3886903 posted 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

5+ Year Member

Msg#: 3886903 posted 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)


5+ Year Member

Msg#: 3886903 posted 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">
<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]

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved