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.
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)
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.
<!-- 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]