title: Overflow element without cutting absolutely positioned elements in it
body: <p>In a <code>container</code> element I have floated element and an absolutely positioned image that needs to protrude from <code>container</code>. However I need <code>container</code> to keep its height because it has a <code>margin-bottom</code> that separate it from the next block below it. </p>
  
  <p>Problem: <code>container</code>'s <code>overflow: hidden</code> cuts the image off so it cannot protrude from it. So I have to choose between 2 things I absolutely need: the image to protrude and <code>container</code> to keep its height. </p>
  
  <p>How to solve this dilemma?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class='container'&gt;
      &lt;div class='col1'&gt;
          content
      &lt;/div&gt;
      &lt;div class='col2'&gt;
          &lt;img src='whatever.jpg'/&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.container {
      overflow: hidden;
  }
  .col1,
  .col2 {
      float: left;
      width: 50%;
  }
  .col2 {
      position: relative;
  }
  img {
      position: absolute;
      top: -100px;
      left: -100px;
  }
  </code></pre>