Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Page Footer with CSS

any way to achieve it regardless of the visitor's screen resolution?

10:32 pm on May 19, 2005 (gmt 0)

New User

10+ Year Member

joined:Mar 22, 2005
votes: 0


Is there any way to position a page footer (which is a separate table in my case) at the very bottom of the page, regardless of the amount of text that goes before it and the screen resolution it's viewed on?

Whatever I've been trying till now either only worked well with certain screen resolution or positioned the footer at the bottom of the screen, not the page, which is no good in case there's more on the page to scroll down to.

Thank you.

1:35 am on May 20, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:July 28, 2003
votes: 0

Perhaps put it at the bottom of the html, then just make sure it is set to clear: both?
2:10 pm on May 20, 2005 (gmt 0)

New User

10+ Year Member

joined:Dec 7, 2004
votes: 0

Here is a method I've used with satisfactory results. IT works well in the Moz family and IE6. Opera7 works so-so. Safari and IE/Mac fail gracefully.

The footer will be at the bottom of the viewport /until/ there is sufficient content to push it down. It will then affix itself to the bottom of the content.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<meta name="generator" content="
HTML Tidy for Linux/x86 (vers 1st August 2004), see www.w3.org" />
<meta name="editor" content="Emacs 21" />
<meta name="author" content="Gary Turner" />
<meta http-equiv="content-type" content="
text/html; charset=us-ascii" />

<title>Footer Test</title>
<style type="text/css">

html, body, #wrapper {
min-height: 100%; /*Sets the min height to the
height of the viewport.*/
width: 100%;
height: 100%; /*Effectively, this is min height
for IE5+/Win, since IE wrongly expands
an element to enclose its content.
This mis-behavior screws up modern
margin: 0;
padding: 0;

html>body, html>body #wrapper {
height: auto; /*this undoes the IE hack, hiding it
from IE using the child selector*/

#wrapper {
position: absolute;
top: 0;
left: 0;

#footer {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;

#main {
margin-bottom: 3em; /*Modify value as needed for
footer height.*/
height: auto;
padding: .5em;



<div id="wrapper">
<div id="main">
<p>Put your whole page here, everything except the footer.</p>
</div><!-- end main -->

<div id="footer">
<p>Put your footer stuff here.</p>

</div><!-- end footer -->
</div><!-- end wrapper -->

Hope that gives you something to play with.