How to make a div in the lower right corner of the user’s screen?

Question

I need the div to appear in the exact lower right corner of the user's screen. This means that the user has a 20-inch monitor or 50 inches, the div should always be shown in the farthest lower right corner. Therefore, the positioning cannot be fixed.

I tried this and could not:

<style>
   .floatBox { border: 1px solid red; width: 300px; height: 100px; position: absolute;  float: right; margin-top: 100%; }
</style>

<div class="floatBox"></div><!-- floatBox -->

I have a feeling that this can only be done using javascript (jQuery), in any case, does anyone have a solution?

Answer 1

why can't fixed positioning be used?

.floatBox {
   position : fixed;
   bottom   : 0px;
   right    : 0px;
}

Answer 2

? ...

http://jsfiddle.net/xP25j/

, .

Answer 3

Try it...

<style>
.floatBox { 
        border: 1px solid red; 
        background:#000000;
        position:fixed;
        width:100px;
        right:0px;
        margin-top:97%;
}
</style>

otherwise make a div into a div to control position.