title: More CSS woes: how to stack divs inside another div, and have them all behave?
body: <p>Fiddle here: <a href="http://jsfiddle.net/csaltyj/mbnWm/" rel="nofollow">http://jsfiddle.net/csaltyj/mbnWm/</a></p>
  
  <pre><code>&lt;style type="text/css"&gt;
      #container {
          border: 2px solid #000;
          position: absolute;
          width: 20em;
      }
  
      .box {
          background: transparent;
          position: absolute;
          border: 1px solid #0f0;
      }
  &lt;/style&gt;
  &lt;div id="container"&gt;
      &lt;div class="box"&gt;
          &lt;p&gt;X&lt;/p&gt;
          &lt;p&gt;Taller than the other two.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="box"&gt;
          &lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;Y&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="box"&gt;
          &lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Z&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is not working. They overlap fine, but there are issues. The goal is to:</p>
  
  <ol>
  <li>Get the <code>#container</code> to properly wrap around the children divs.</li>
  <li>Have the <code>.box</code> divs fill (width &amp; height) the parent <code>#container</code> (so the green borders should reach all the way out to the thick black border).</li>
  </ol>
  
  <p>This must be possible, I'm just having a hard time with positioning. (that and floats seem to be the toughest parts of CSS)</p>
  
  <p>Thanks for any help.</p>