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.
??? - “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.
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.)
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.