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)

10+ Year Member


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)

10+ Year Member

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)

10+ Year Member

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.




Featured Threads

Hot Threads This Week

Hot Threads This Month