How to position a div in bottom right corner of a browser?

CssCross Browser

Css Problem Overview

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?

Css Solutions

Solution 1 - Css

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>

Solution 2 - Css

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 :)

Solution 3 - Css

Try this:

#foo
{
    position: absolute;
    top: 100%;
    right: 0%;
}
Categories
Recommended Css Solutions
Recommended Cross Browser Solutions

Previous Solution:

Is it faster to add to a collection then sort it, or add to a sorted collection?

JavaSortingCollections

Next Solution:

Browser can't access/find relative resources like CSS, images and links when calling a Servlet which forwards to a JSP

CssImageJspServlets

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionKoolKabinView Question on Stackoverflow
Solution 1 - CsssewaView Answer on Stackoverflow
Solution 2 - CssMorgothView Answer on Stackoverflow
Solution 3 - CssCipiView Answer on Stackoverflow