How can I float a div at the bottom of the screen in IE?

Question

I wish to float a DIV container at the bottom of the user's screen, it should always float when the user scrolls

Tried using:

position: fixed;
bottom: 0px;

This works fine for Firefox, but not for IE !!

Any ideas on how to get it working in IE

Update, used (referred from http://tagsoup.com/cookbook/css/fixed/bottom/):

<html>
<body>
<style>
body
    {
    margin: 0;
    padding: 0 0 8em 0;
    color: #000;
    background: #fff;
    font-size: 1em;
    }
  div#fixedbox
    {
    overflow: auto;
    width: 100%;
    height: 8em;
    position: absolute;
    bottom: 0;
    left: 0;
    color: #000;
    background: #ddd;
    }
  div#content
    {
    padding: 1em;
    }

@media screen
  {
  body>div#fixedbox
    {
    position: fixed;
    }
  }

</style>


<div id="content" style="width: 500px; height: 1200px">dfdf</div>
<div id="fixedbox"> The quick brown fox is stuck in this box. </div>
</body>
</html>

But the problem continues..

Thanks Akash

http://stackoverflow.com/questions/971123/css-fixed-to-bottom-and-centered — grc, Nov 08 '11 at 05:50
It would be useful to see more code. Also, this has been answered quite a bit in the past. Perhaps this would be useful: http://stackoverflow.com/questions/7991048/how-to-keep-an-absolute-positioned-item-at-the-bottom-of-the-site-even-if-there/7991172#7991172 — Steve Adams, Nov 08 '11 at 05:51
Finally got it working using: http://www.howtocreate.co.uk/fixedPosition.html thanks for your help guys — Akash, Nov 08 '11 at 07:08

Harout360 · Answer 1 · 2011-11-08T06:09:33.363

Absolutely positioned elements outside of div.content will be fixed in respect to the viewport, absolutely positioned elements inside of div.content will behave normally. This works in version 5.0 and higher of ie on windows and is the most stable solution available.

Click "start playing", view the source, and learn...

http://tagsoup.com/cookbook/css/fixed/bottom/

body
    {
    margin: 0;
    padding: 0 0 8em 0;
    }
  div#fixedbox
    {
    overflow: auto;
    width: 100%;
    height: 8em;
    position: absolute;
    bottom: 0;
    left: 0;
    }
{
  body>div#fixedbox
    {
    position: fixed;
    }

How can I float a div at the bottom of the screen in IE?

1 Answers1