Home/ Questions/Q 46295
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-10T15:56:37+00:00

I know this would be easy with position:fixed, but unfortanately I’m stuck with supporting

  • 0

I know this would be easy with position:fixed, but unfortanately I’m stuck with supporting IE 6. How can I do this? I would rather use CSS to be clean, but if I have to use Javascript, that’s not the end of the world. In my current implementation I have a ‘floating footer’ that floats above the main content area and is positioned with Javascript. The implementation I have right now is not particular elegant even with the Javascript, so my questions are:

  1. Is there a way to do this without Javascript?
  2. If I have to use Javascript, are there any ‘nice’ solutions to this floating footer problem? By ‘nice’ I mean something that will work across browsers, doesn’t overload the browser’s resources (since it will have to recalculate often), and is elegant/easy to use (i.e. it would be nice to write something like new FloatingFooter('floatingDiv')).

I’m going to guess there is no super easy solution that has everything above, but something I can build off of would be great.

Finally, just a more general question. I know this problem is a big pain to solve, so what are other UI alternatives rather than having footer content at the bottom of every page? On my particular site, I use it to show transitions between steps. Are there other ways I could do this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. This may work for you. It works on IE6 and Firefox 2.0.0.17 for me. Give it a shot. I made the footer’s height very tall, just for effect. You would obviously change it to what you need. I hope this works for you.

    <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'> <html> <head> <title>Liquid Footer</title>     <style type='text/css'>     .footer { background-color: #cdcdcd; height: 180px; text-align: center; font-size:10px; color:#CC0000; font-family:Verdana; padding-top: 10px; width: 100%; position:fixed; left: 0px; bottom: 0px; }     </style>     <!--[if lte IE 6]>     <style type='text/css'>     body {height:100%; overflow-y:auto;}     html {overflow-x:auto; overflow-y:hidden;}     * html .footer {position:absolute;}     </style>     <![endif]--> </head>  <body>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    This is to expand the content on the page<br>    <div class='footer'>-- This is your liquid footer --</div> </body> </html>

    • 0