title: Position: absolute and parent height?
body: <p>I have some containers and their children are only absolute / relatively positioned. How to set containers height so their children will be inside of them?</p>
  
  <p>Here's the code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;section id="foo"&gt;
      &lt;header&gt;Foo&lt;/header&gt;
      &lt;article&gt;
          &lt;div class="one"&gt;&lt;/div&gt;
          &lt;div class="two"&gt;&lt;/div&gt;
      &lt;/article&gt;
  &lt;/section&gt;    
  
  &lt;div style="clear:both"&gt;Clear won't do.&lt;/div&gt;
  &lt;!-- I want to have a gap between sections here --&gt;
  
  &lt;section id="bar"&gt;
      &lt;header&gt;bar&lt;/header&gt;
      &lt;article&gt;
          &lt;div class="one"&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;
          &lt;div class="two"&gt;&lt;/div&gt;
      &lt;/article&gt;
  &lt;/section&gt;  
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>article {
      position: relative;
  }
  
  .one {
      position: absolute;
      top: 10px;
      left: 10px;
      background: red;
      width: 30px;
      height: 30px;
  }
  
  .two {
      position: absolute;
      top: 10px;
      right: 10px;
      background: blue;
      width: 30px;
      height: 30px;
  }
  </code></pre>
  
  <p>Here's a jsfiddle. I want "bar" text to appear between 4 squares, not behind them.</p>
  
  <p><a href="http://jsfiddle.net/Ht9Qy/">http://jsfiddle.net/Ht9Qy/</a></p>
  
  <p>Any easy fixes?</p>
  
  <p><strong>Note that I don't know height of these children, and I can't set height: xxx for containers.</strong></p>