homepage Welcome to WebmasterWorld Guest from 54.227.34.0
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Positioning footer div at the bottom of page?
jtown

5+ Year Member



 
Msg#: 3932791 posted 11:20 pm on Jun 13, 2009 (gmt 0)

Does anyone know how to keep a footer div at the bottom of a page? Here's what I'm currently getting on a page with a short amount of content height wise:

(top)
----------------
Content
----------------
Footer

----------------
(bottom)

On pages where there is enough content this looks ok because the footer is pushed down. Here's what I want:

(top)
----------------
Content
----------------

Footer
----------------
(bottom)

Is there a way to do this without doing position: absolute cause that doesn't work at all when there's too much "Content"? Thanks!

 

klendino

5+ Year Member



 
Msg#: 3932791 posted 3:52 pm on Jun 14, 2009 (gmt 0)

Use a floating element for the bottom part.

swa66

WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3932791 posted 7:29 pm on Jun 14, 2009 (gmt 0)

Position absolute is the way to do it, but you have to do it right ;)

Take a look at this in a standard compliant browser (not in IE):


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
html {
background-color: #ccc;
height: 100%;
}
body {
background-color: white;
width: 770px;
margin: 0 auto;
position: relative;
min-height: 100%;
border-left: 1px solid #666;
border-right: 1px solid black;
}
#content {
padding: 0 5px 1.3em;
border-top: 1px solid #666;
}
#footer {
position: absolute;
bottom:0;
width: 100%;
height: 1.3em;
border-bottom: 1px solid black;
}
#footer p {
padding: 1px 5px 0;
}
</style>
</head>
<body>
<div id="content">
<p>FIRST LINE</p>
<p>replace me with a long text in order to get scrollbars</p>
<p>LAST LINE</p>
</div>
<div id="footer">
<p>Hi, I'm a footer</p>
</div>
</body>
</html>

So how does it work ?

100% height:
body is given a minimum height of 100%. This means ist at the minimum will get the height of it's direct parent (html), provided it is set explicitly. It can get longer should it need to do so (IE6 will stumble over this, but that's a problem for later)
This means html is given height:100% and since it's direct parent is the root element the height for html is as heigh as the viewport (so potentially it's shorter than body (no worries no browser renders it that way)

This means any vertical padding borders or margins on body are a problem as they would make it larger than the viewport. So the top and bottom borders go on the inside elements.
The left and right borders (if you want them) need to go on the body as it's the only element that's going to be the full length if your content doesn't get to be long enough (same goes for a background you need all the way down the page).

The width and auto margins on the body are to make it center.

The position:relative is not to nudge it about, but it is to make it gain "position": any child of it using absolute positioning will is the body as a reference instead of the viewport. This is important (remeber the min-height) as it's the element that gets to be at least as heigh as the viewport, but larger if needed.

The footer get abdolute positioning and gets put on the bottom.
Since absolutely positioned block shrink, we put it back to the full width of the body (width 100%) [think about this: why is it the width of the body ?]

The content needs to clear the footer in case the content is long enough to force scrolling, so make sure the footer has a known height and give the content enough padding to have enough stuff near it's bottom where no content will be as to allow the footer to overlap that area.

The 5px padding on the left and right of the paragraph in the footer and of the content are to make them stand away from the border. now a good exercise for the reader is to know why they were put here and not on the body or the footer (tip: try it, and remember that width you set is of the content.)

To see better where the content and the footer are, try addign somethign like:

#content {
background-color: #ccf;
}
#footer {
background-color: #cfc;
}

If you are going to add floated content inside the content div, be careful that you make content stretch to encompass any floated content in might have. (clearfix or a simple <br /> that has clear:both comes to mind)

Once you get this right and fully understand it, we can take a look at the legacy Ie versions and see if they need help (at least IE6 will need help since we've used some things beyond it.

swa66

WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3932791 posted 8:09 pm on Jun 14, 2009 (gmt 0)

Testing it in IE

IE8: works as expected

IE7: works too

IE6:
As expected, it doesn't play nice with the min-height, so we need to work around that failure of IE6.

A simple conditional comment is easiest:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
html {
background-color: #ccc;
height: 100%;
}
body {
background-color: white;
width: 770px;
margin: 0 auto;
position: relative;
min-height: 100%;
border-left: 1px solid #666;
border-right: 1px solid black;
}
#content {
padding: 0 5px 1.3em;
border-top: 1px solid #666;
}
#footer {
position: absolute;
bottom:0;
width: 100%;
height: 1.3em;
border-bottom: 1px solid black;
}
#footer p {
padding: 1px 5px 0;
}
</style>
<!--[if IE 6]>
<style type="text/css">
body {
height: 100%; /* failure to support min-height */
}
</style>
<![endif]-->
</head>
<body>
<div id="content">
<p>FIRST LINE</p>
<p>replace me with a long text in order to get scrollbars</p>
<p>LAST LINE</p>
</div>
<div id="footer">
<p>Hi, I'm a footer</p>
</div>
</body>
</html>

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