Alt-Web Design & Publishing
CSS Sticky-Footer Demo
with conditional comments for IE5.5 and IE6

Description:

If your browser supports Fixed Positioned divisions - as most modern browsers do, you should see a green footer box in the bottom of your screen. As you scroll up, down, or resize viewport, the footer remains in view (fixed). If you are using an obsolete browser like Netscape 4, the green footer box is not visible until you scroll down to the end of this page.

Method:

How I survived a computer disaster

 

Spam Filter - Free Trial

CSS Code

#Sticky {
color:#FFF;
border: 2px solid orange;
position:fixed;
/**adjust location**/
right: 0px;
bottom: 0px;
padding: 0 10px 0 10px;
width: 100%;
background: green;
/* Netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this */
_position: absolute;
}

 

 

 

 


Earn money from your website with Lunarpages Affiliate Program.
Lunarpages.com Web Hosting

 

Html Conditional Comments

<head>
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style type="text/css">
div#Sticky {
/* IE5.5+/Win - this is more specific than the IE 5.0 version */
right: auto; bottom: auto;
left: expression( ( 0 - Sticky.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( 0 - Sticky.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}
</style>
<![endif]>
<![endif]-->

</head>

The conditional comment above is for IE5.5 and IE6. If no support is required for these browsers, you may omit it from your HTML page. For more about why this works, visit http://www.howtocreate.co.uk/fixedPosition.html

Html Sticky Footer Code

<body>
<!--Place this near the bottom of your HTML markup-->
<div id="Sticky">
<p>Here is a Sticky Footer</p>
</div>

</body>

</html>

 

 

bookmarks

 

 

Lunarpages.com Web Hosting

 

Valid XHTML 1.0 Transitional    Valid CSS!

Demos:

CSS Templates:

 

Here is a Sticky Footer

© 2010 Alt-Web Design & Publishing alt-web.com