title: Aligning Div to the bottom right
body: <p>I have two elements that I would like to put on the bottom right of the page.I went through a couple of threads but some parts help and others tend to kill the layout. </p>
  
  <p>Note: The background color is for illustration purposes. I would like the text aligned to the right.</p>
  
  <p>Here is where I am at: (<a href="http://jsfiddle.net/dsri/WswG9/" rel="nofollow">http://jsfiddle.net/dsri/WswG9/</a>)</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="container"&gt;
  &lt;div id="a"&gt; &lt;span id="aa"&gt;Text1&lt;/span&gt;&lt;/div&gt;
  &lt;div id="b"&gt; &lt;span id="bb"&gt;Text2&lt;/span&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>div#container{
  text-align: center;    
  }
  span#aa{
  font-size: 75px;
  color: rgba(0, 0, 0, 0.5);
  background-color: Yellow;
  overflow: hidden;
  }
  span#bb{
  font-size: 45px;
  color: rgba(0,0,0,0.5);
  background-color: red;   
  } 
  </code></pre>
  
  <p>This is what I would ideally like:
  <a href="http://i.imgur.com/ANuAvly.png" rel="nofollow">http://i.imgur.com/ANuAvly.png</a></p>