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


If your browser supports Fixed Positioned divisions - as most modern browsers do, you should see a semi-transparent 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.


How I survived a computer disaster


Spam Filter - Free Trial

CSS Code

#Sticky {
border: 2px solid orange;
/**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;


 Web Hosting


Html Conditional Comments

<!--[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' );


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

Html Sticky Footer Code

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







Here is a Sticky Footer

© 2014 Alt-Web Design & Publishing