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



All Articles