Div получает неизвестную и нежелательную высоту из-за предыдущего плавающего div

Question

Допустим, у меня есть блог, и я хочу, чтобы боковая панель была плавающей справа (фиксированная ширина), ползунок + содержимое слева, а не плавающая (текучая среда) и небольшой промежуток между боковой панелью и ползунком + содержимое.

Поэтому, чтобы добиться этого, я сделал то, что вы найдете впереди.

Проблема в том, что у меня всплыл a тег внутри содержимого, поэтому я использовал clearfix на его контейнере (article тег).

Но вдруг article становится огромным, и он будет увеличиваться по мере добавления чего-либо (больше .widgets например) к .sidebar,

В чем дело? Как я могу предотвратить это? Если я не могу предотвратить такое поведение, как я могу добиться того же флюида + фиксированного макета?

http://jsfiddle.net/wjVDX/

THE HTML
------------
<div class="container clearfix">
    <div class="slider">
    </div>
    <div class="sidebar">
        <div class="widget"></div>
        <div class="widget"></div>
        <div class="widget"></div>
        <div class="widget"></div>
        <div class="widget"></div>
        <div class="widget"></div>
        <div class="widget"></div>
    </div>
    <div class="content">
        <article class="clearfix">
            <a href="#"><img src="http://lorempixel.com/50/50/" alt="" /></a>
            <p>This is NOT what I want</p>
        </article>
    </div>
</div>

THE CSS
------------
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

img {
    max-width: 100%;
}

.container {
    width: 50%;
    margin: 0 auto;
    background-color: rgba(0,0,0,.2);
    position: relative;
    padding: 10px;
}

.slider {
    height: 50px;
    background: red;
    margin-right: 70px; /* 60px from the .sidebar + 10px margin */
}

.sidebar {
    width: 60px;
    background: blue;
    float: right;
    position: relative;
    top: -50px; /* Height of .slider */
    margin-bottom: -50px; /* To compensate for the position: relative; */
}

.widget {
    background: yellow;
    height: 30px;
    margin-bottom: 5px;
}

.content {
    background: green;
    margin-right: 70px; /* 60px from the .sidebar + 10px margin */
}

.content article {
    background: pink;
}

.content article a {
    display: block;
    float: left;
    margin-right: 5px;
}

.content article p {
    line-height: 20px;
    background: brown;
}

Answer 1

Как вы можете видеть в этом JSFiddle, добавив

overflow:hidden;

Контент должен делать то, что вы просили.

РЕДАКТИРОВАТЬ: у законодателей было это.