css - 以前のフローティング div が原因で、不明で不要な高さを取得する Div

Question

私がブログを持っていて、サイドバーを右に浮かせて (幅を固定)、スライダー + コンテンツを左に浮かせずに (流動的に)、サイドバーとスライダー + コンテンツの間に少し隙間を作りたいとします。

それを達成するために、私はあなたが先に見つけることをしました。

a問題は、コンテンツ内に浮動タグがあるためclearfix、そのコンテナー (articleタグ) で a を使用したことです。

しかし、突然、が巨大になり、 に何か (たとえば、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;
}