title: CSS Positionning : container doesn't fit to its content size
body: <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div content&gt;
    &lt;div post&gt;
    &lt;div post&gt; 
    ...
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.post {
      margin: 0; padding: 110px 20px 20px;
      float: left;
      width: 560px;
      position: relative;
      display: block;
  }
  #content {
      display: block;
      padding: 15px;
      overflow: visible // hidden
      min-height: 250px;
  }
  </code></pre>
  
  <p>When <code>#content</code> is set to <code>overflow:visible</code>, it doesn't fit to its content size i.e. each post is well displayed, but <code>#content</code> height is its min-height.</p>
  
  <p>When <code>overflow:hidden</code> is set, <code>#content</code> adapts its size to its content, but the <code>.post</code>'s are cut to the <code>#content</code> metrics. <code>.post</code> contains <code>position:absolute</code> elements located outside of <code>.post</code> with negative margins.</p>
  
  <p>Can <code>#content</code> fit to <code>.post</code>'s height and at the same time not cut it on the sides?</p>