How to make a div appear at the exact bottom right of a user's screen?

I need a div to appear at the exact bottom right of a user's screen. That means, whether the user has a 20 inch monitor or a 50 inch, the div always needs to show at the farthest bottom right. So the positioning can't be fixed.

I tried this and failed:

<style>
   .floatBox { border: 1px solid red; width: 300px; height:开发者_如何学Go 100px; position: absolute;  float: right; margin-top: 100%; }
</style>

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

I have a feeling it can only be done with javascript (jQuery), in either case does anyone have a solution?

---

why can't fixed positioning be used?

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

---

Why are you using absolute positioning and floating at the same time? Check out the fiddle...

http://jsfiddle.net/xP25j/

I hope this helps.
Hristo

---

Try this...

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

otherwise make div within a div to control the position.