homepage Welcome to WebmasterWorld Guest from 107.22.45.61
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Positioning a footer at the bottom of a page
1337Mac




msg:3886905
 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




msg:3887076
 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




msg:3887316
 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




msg:3887918
 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




msg:3888184
 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%">
<!-- 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>
</div><!--id="footer"-->
</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]

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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved