title: Why does this inner div show up below the outer div?
body: <p>I have two divs, one inner and one outer, but the inner <code>div</code> is being rendered below the outer <code>div</code>.  Here's my simplified markup:</p>
  
  <pre><code>&lt;div id="outer" style="position: relative;"&gt;
      Outer
  
      &lt;div id="inner" style="position: absolute; right: 0;"&gt;
          Inner
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>I can confirm in Firebug that the inner <code>div</code> is rendered below (and outside of the outer div).  Obviously I'm assuming that there is some other style on the page that could cause this, but I haven't been able to find it.  What could cause this kind of behavior?  Interestingly, when I remove the <code>position: absolute;</code> style from the inner <code>div</code>, this behavior disappears... but of course I don't get the positioning I want in that case.</p>
  
  <p>What I want here is the inner <code>div</code> to appear below the text "Outer," but still inside the outer <code>div</code>.  I'd like to to be aligned to the right side of #outer.</p>
  
  <p>There's also another <code>div</code> inside #outer, where the text "Outer", aligned to the left (<code>position: absolute; left: 0;</code>).  I didn't mention that in the original question because it didn't seem directly relevant to the behavior I'm observing.  Both inner divs with absolute positioning show up below and outside of #outer.</p>
  
  <p><em>Edit</em>: What I really, really want here is an outer container with two inner columns: one on the left and one on the right.  Floats seem to cause other problems, so I was hoping that relative+absolute positioning would solve this.</p>