How to set a div's position inside another div to bottom right corner?

Question

In this example:

html

<div style="width:50%;overflow:hidden">  
        <div id="inboxHeader">
                    <div id="inboxCount"><p>Earth</p></div>

        </div>
    </div>

css

#inboxHeader{
        background-color:yellow;    
        height :300px;
        position: relative;
    }

    #inboxCount{
        position: absolute; 
        bottom: 0;
        float:right; 
    }

Earth is in the bottom left corner. So how can I shift it to the bottom right corner?

Answer 1

Set right:0 instead of float:right

http://jsfiddle.net/8np2f/4/

Answer 2

As it's an absolutely positioned element change float:right; for right: 0px;

If it was positioned relatively then you would need to float it to the right however absolute positioning removes the element from the flow of the DOM.

One caveat however, make sure the parent element has it's position set either to relative or absolute as required, or the child element could position itself against the highest in the DOM tree that has a position set.