Here's the CSS and HTML I use for the sticky footer. Obvious some measurements will have to be adjusted to fit you needs.
CSS
<style type="text/css">
/* STICKY FOOTER CSS */
#sticky_navigation {
min-width: 600px;
position: relative; /*this you need on your footer, position: relative;*/
}
#sticky_container {
min-width: 600px;
position: relative; /*this you need on your footer, position: relative;*/
}
/*IE6 hack for min-width... skipped*/
#sticky_container {
min-height: 100%; /*100%; height model again*/
/*font: normal 1em/1.5em arial, helvetica, sans-serif;*/
}
* html #sticky_container {
height: 100%; /*IE6*/
}
/*here's footer:*/
#sticky_navigation {
width: 100%;
background: url('../images/clear_bg.gif');
position: fixed;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
z-index: 1000;
}
/*IE6 and below don't understand position: fixed... if you need to support them, you'll need this... does NOT work on browsers who have Javascript turned off!*/
* html #sticky_navigation {
position: absolute;
width: 100%;/*IE5.5*/
bottom: 0;
left: 0;
overflow: visible; /*earlier had overflow: hidden on various things... you might not need this line*/
top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
}/*that was the CSS Expression for position: fixed at the bottom of the page. */
/*the rest is my menu inside.*/
#sticky_navigation #sticky_navmenu {
margin: 0 auto;
position: relative;
z-index: 10;
width: 590px;
background: url('../images/clear_bg.gif');
text-align: center;
color: #009;
}
</style>
HTML
<body>
<!-- BEGIN STICKY FOOTER - PLACE IMMEDIATELY BELOW BODY TAG -->
<div id="sticky_navigation">
<div id="sticky_navmenu">
<!-- YOUR NAVIGATION -->
</div>
</div>
<!-- END STICKY FOOTER -->
Marshall
