95

I am trying to place my div with some notes in the bottom right position of the screen which will be displayed all time.

I used following css for it:

#foo
{
     position: fixed;
     bottom: 0;
     right: 0;
}

It works fine with Chrome 3 and Firefox 3.6 but IE8 sucks...

what can be a suitable solution for it?

DanBlakemore
  • 2,306
  • 2
  • 20
  • 23
KoolKabin
  • 17,157
  • 35
  • 107
  • 145
  • What DOCTYPE are you using? Thinking of IEs "compatibility" modes – sewa Sep 01 '10 at 09:29
  • none... which should be used? – KoolKabin Sep 01 '10 at 09:31
  • In relation to your IE6 comment below, IE6 does not understand `position:fixed;`. So what you do is have a wrapper div that has `position:relative;` filling the whole screen and then you position the div you want with `position:absolute;`. If however your site scrolls down you need to use CSS expressions in IE6 to keep the div docked to the bottom right corner. – Strelok Sep 01 '10 at 09:44
  • thnx for the information. regarding IE 6 them i would better leave it alone... :P where can i fnd that css expression – KoolKabin Sep 01 '10 at 10:08

3 Answers3

150

This snippet works in IE7 at least

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Test</title>
<style>
  #foo {
    position: fixed;
    bottom: 0;
    right: 0;
  }
</style>
</head>
<body>
  <div id="foo">Hello World</div>
</body>
</html>
sewa
  • 1,894
  • 1
  • 13
  • 8
18

I don't have IE8 to test this out, but I'm pretty sure it should work:

<div class="screen">
   <!-- code -->
   <div class="innerdiv">
      text or other content
   </div>
</div>

and the css:

.screen{
position: relative;
}
.innerdiv {
position: absolute;
bottom: 0;
right: 0;
}

This should place the .innerdiv in the bottom-right corner of the .screen class. I hope this helps :)

Morgoth
  • 415
  • 1
  • 6
  • 11
11

Try this:

#foo
{
    position: absolute;
    top: 100%;
    right: 0%;
}
Cipi
  • 11,055
  • 9
  • 47
  • 60