title: Absolute child collapses parent to zero height only on Safari
body: <p>I've read many questions about absolute positioning and its quirks, but none of them really gave me an answer, so here goes...</p>
  
  <p><a href="http://jsfiddle.net/8Zvb9/" rel="nofollow">Here's a fiddle</a>, with the following HTML and CSS :</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="wrap"&gt;
      &lt;div class="inline-div"&gt;
          &lt;label&gt;
              Test
          &lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="next-in-line"&gt;&lt;input type="text" /&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>div.wrap {
      width: 320px;
      border: 1px dashed grey;
  }
  
  div.inline-div {
      border: 1px solid red;
      display: inline;
      padding-right: 10px;
  }
  
  div.next-in-line {
      display: inline;
      clear: both;
  }
  
  label {
      position: absolute;
      display: inline;
      margin-top: 32px;
      margin-left: 15px;
      margin-right: 15px;
  }
  
  input {
      padding: 15px;
      padding-left: 100px;
      width: 200px;
  }
  </code></pre>
  
  <p>I've highlighted the problematic <code>div</code> with a red border. On Chrome, FF, and IE, even though the child element is positioned absolutely, you can clearly see a red rectangle. Apparently the <code>div</code> takes its height from its child element. It also has a width (induced by the padding-right property)</p>
  
  <p>On Safari, the div's size is always 0x0, which actually seems more logical : the child element is positioned absolutely, so the parent should collapse. Why is Safari the only browser to behave this way ?</p>
  
  <p><strong>Given this HTML</strong>, how can I achieve the same layout in all browsers, with the label positioned inside the input box ?</p>
  
  <p>I repeat : I cannot make any modifications to the HTML, only the CSS. Thank you.</p>