title: How to set a div's position inside another div to bottom right corner?
body: <p><a href="http://jsfiddle.net/prime/8np2f/2/" rel="noreferrer">In this example</a>:</p>
  
  <p><em>html</em></p>
  
  <pre><code>&lt;div style="width:50%;overflow:hidden"&gt;  
          &lt;div id="inboxHeader"&gt;
                      &lt;div id="inboxCount"&gt;&lt;p&gt;Earth&lt;/p&gt;&lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><em>css</em></p>
  
  <pre><code>#inboxHeader{
          background-color:yellow;    
          height :300px;
          position: relative;
      }
  
      #inboxCount{
          position: absolute; 
          bottom: 0;
          float:right; 
      }
  </code></pre>
  
  <p><code>Earth</code> is in the <code>bottom left</code> corner. So how can I shift it to the <code>bottom right</code> corner?</p>