homepage Welcome to WebmasterWorld Guest from 23.20.34.25
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Page Footer with CSS
any way to achieve it regardless of the visitor's screen resolution?
IrishWonder




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

Hello,

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.

 

Sharper




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

Perhaps put it at the bottom of the html, then just make sure it is set to clear: both?

kk5st




msg:1188824
 2:10 pm on May 20, 2005 (gmt 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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<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">
/*<![CDATA[*/

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
browsers*/
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;
}

/*]]>*/

</style>
</head>

<body>
<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 -->
</body>
</html>

Hope that gives you something to play with.

cheers,

gary

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved