title: Clearfix with absolute positioned elements
body: <p>My problem is the following:<br>
  The border does not wrap the containing items. I know this is because I position the content-item absolute, but I need them to be absolute for the layout to work. This also means that I cannot use the clearfix solution (this means that I have to float the elements, which it not an option).<br>
  So my question is, how to I get the parent div to get the height of the contained elements.</p>
  
  <p><strong>EDIT: No Javascript solution, CSS only</strong></p>
  
  <p>Html:</p>
  
  <pre><code>&lt;div class="mask"&gt;
      &lt;div id="content-1" class="content-item"&gt;
          Lorem ipsum dolor sit amet, consectetur adipisicing elit...
      &lt;/div&gt;
      &lt;div id="content-2" class="content-item"&gt;
          Lorem ipsum dolor sit amet, consectetur adipisicing elit...
      &lt;/div&gt; 
  &lt;/div&gt;​​​​
  </code></pre>
  
  <p>CSS:  </p>
  
  <pre><code>.mask{
      position:relative;
      width:800px;
      border: 1px solid black;
  
  }
  .content-item{
      position: absolute;
      width:300px;
  }
  #content-1{
      left:10px;
  }
  #content-2{
     left: 300px;
  }
  </code></pre>
  
  <p>​</p>