title: how can I position nested divs at the bottom and float right?
body: <p>Say I have a parent div with three child divs.  Is there a way that I can position everything in the bottom right corner?  Something like this:</p>
  
  <pre><code>--------------------------------------
  |                                    |
  |                                    |
  |                                    |
  |                                    |
  |                                    |
  |                   test1 test2 test3|
  |------------------------------------|
  </code></pre>
  
  <p>I tried this css:</p>
  
  <pre><code>   #header
      {
          position:relative;
      }
      #nav_tabs
      {
          position:relative;
          width:50%;
          height:100%;
          float:right;
      }
      .tab
      {
          position:absolute;
          bottom:0px;
          float:right;
      }
  </code></pre>
  
  <p>With this HTML:</p>
  
  <pre><code>&lt;div id="header"&gt;
  &lt;div id="nav_tabs"&gt;
      &lt;div class="tab"&gt;test1&lt;/div&gt;
      &lt;div class="tab"&gt;test2&lt;/div&gt;
      &lt;div class="tab"&gt;test3&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But it looks like it is stacking my tabs one on top of the other.  What is the correct way to do this?</p>