Overflow element without cutting absolutely positioned elements in it
<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>