Is there a way to position a div that is centered and always flush against the bottom of the page? Im trying to center a div at the bottom of my page design, the problem is when a person views it at a higher resolution the bottom div doesnt go all the way to the bottom, leaving white space between the bottom and the div. And I dont want to have to push it down with the divs above it. Hope that makes sense.
Thanks!
Silly
If you want it always at the bottom regardless of the screen size then give it an absolute positioning. bottom:0;
Or maybe you’re after a sticky footer solution.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html, body{
background: blue;
height: 100%;
}
#wrapper{
background: #fff;
margin: 0 auto;
min-height: 100%;
width: 800px;
}
* html #wrapper{
height: 100%;
}
#footer{
background: yellow;
color: #000;
height: 100px;
margin: -100px auto 0;
width: 800px;
}
#clearfooter{clear:both;height:100px;} /* same height as footer */
</style>
</head>
<body>
<div id="wrapper">
<div id="clearfooter"></div>
</div>
<div id="footer">
<p>This is the div flush with the bottom.</p>
</div>
</body>
</html>
For a “Sticky” footer I would use static positioning instead. (yes, I know IE6 doesn’t respect it), but there are quick fixes for that.
??? - “static” is the default value for positioning, and IE6 has no problem with that. The “sticky footer” technique (pioneered by Paul O’B) that tictike outlined above works very well.
maybe Sillysoft meant fixed…
Yes, I am sorry
I meant fixed. I dont know what you mean by Pioneered, but there is no rocket science behind it. A simple position:fixed; bottom:0 does the trick.
Oh sorry, I meant Phildev.
Why use position: fixed; bottom: 0; and implement ‘work arounds’ for IE6 when you can use a sticky footer?
A simple position:fixed; bottom:0 does the trick.
IE6 doesn’t understand position:fixed so things aren’t that simple 
For IE6 you would either needs an expression or use a complicated overflow technique that requires re-organising the html.
A sticky footer is different to a fixed positioned footer in that it lies at the bottom of the viewport unless content is greater when it then lies at the bottom of the document. (The method was originally developed by me several years ago here on the forums in response to a similar question. Since then other similar methods have sprung up but most are broken in one way or another.)
Well, a way I have found for IE6 to make it work is just
html, body {
height: 100%; overflow: auto;
}
and positioning the fixed element as absolute. Weird isn’t it, however it works.
It is similar to the sticky note somehow. What is the logic behind the sticky note?
like this?:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html, body{
background: blue;
overflow: auto;
height: 100%;
}
#wrapper{
background: #fff;
margin: 0 auto;
min-height: 100%;
width: 800px;
}
* html #wrapper{
height: 100%;
}
#footer{
background: yellow;
margin-top: 5px;
position: absolute;
bottom: 0;
width: 800px;
}
</style>
</head>
<body>
<div id="wrapper">
<p>other content in the natural flow of the document.</p><p>other content in the natural flow of the document.</p>
<div id="footer">
<p>This is the div flush with the bottom.</p>
</div>
</div> <!-- end wrapper -->
</body>
</html>
one problem is content will now go under the footer… this does not happen with sticky footers.
You can offset that by applying padding bottom to the last element before the footer or use a clearer div similar to the sticky footer.
and positioning the fixed element as absolute. Weird isn’t it, however it works
You need the extra wrapper as in tictikes example above otherwise you get 2 scrollbars. Then there is the problem if you want 100% width as you get weird scrollbars. All in all it’s a fragile concept that only works in controlled situations.