title: Overflow conflict with absolute position inside float
body: <p>There is a 'container' with overflow: auto that contains groups of floated elements, 'value'. Inside 'value', there is an absolute positioned element, 'popup' which gets cut off by the overflow. How can I make 'popup' show up and still keep 'container' from losing its layout?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="group"&gt;
      &lt;span class="label"&gt;Label&lt;/span&gt;
      &lt;span class="value"&gt;
        &lt;span class="popup_container"&gt;
          &lt;div class="popup"&gt;Popup&lt;/div&gt;
        &lt;/span&gt;
      &lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="group"&gt;
      &lt;span class="label"&gt;Label&lt;/span&gt;
      &lt;span class="value"&gt;
        &lt;span class="popup_container"&gt;
          &lt;div class="popup"&gt;Popup&lt;/div&gt;
        &lt;/span&gt;
      &lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.container {
      overflow: auto;
      background-color: red;
  }
  .label {
      float: left;
      clear: left;
      width: 100px;
  }
  .value {
      float: left;
  }
  .popup_container {
      position: relative;
  }
  .popup {
      position: absolute;
      height: 200px;
      width: 200px;
      background-color: orange;
  }
  </code></pre>
  
  <p>Please see <a href="http://jsfiddle.net/KA7AB/2/" rel="nofollow">http://jsfiddle.net/KA7AB/2/</a></p>
  
  <p>Thanks</p>