Best IT Recipes

How to place a div in the lower right corner of the browser?

I am trying to put my div with some notes in the position at the bottom right on the screen, which will be displayed all the time.

I used the following css for this:

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

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

What might be the solution for him?

+46
css cross-browser
Sep 01 '10 at 9:21
source share
3 answers

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>
+74
Sep 01 '10 at 9:33
source share

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

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

and css:

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

This should put .innerdiv in the lower right corner of the .screen class. Hope this helps :)

+5
Jun 30 '13 at 20:05
source share

Try the following:

 #foo { position: absolute; top: 100%; right: 0%; }
+4
01 Sep '10 at 9:30
source share


More articles:


All Articles