CSS плавает, а не плавает?

Question

У меня плавают некоторые Div, но по какой-то причине 3-й DIV не попадает под 1-й DIV. Я не могу понять, почему? Я думаю, что это как-то связано с изображениями. Когда изображения не в, они плавают нормально.

http://jsfiddle.net/xtian/9Je65/

HTML:

<div class="dl-content">
            <div class="dl-content-left">
                <div class="content-block">
                    <img src="http://demo.omnigon.com/christian_bovine/SOLIEF/img/thumbs/thumb1.jpg" alt="">
                    <h4 class="left">The History of Documentation</h4>
                    <p>The Historical Documentation Exhibit is now open on Ellis! Come view hundreds of...</p>
                </div>

                <div class="content-block">
                    <img src="http://demo.omnigon.com/christian_bovine/SOLIEF/img/thumbs/thumb2.jpg" alt="">
                    <h4 class="left">Rebuilding Ellis One Brick at a Time</h4>
                    <p>The Historical Documentation Exhibit is now open on Ellis! Come view hundreds of...</p>
                </div>

                <div class="content-block">
                    <img src="http://demo.omnigon.com/christian_bovine/SOLIEF/img/thumbs/thumb3.jpg" alt="">
                    <h4 class="left">Title Number 3</h4>
                    <p>The Historical Documentation Exhibit is now open on Ellis! Come view hundreds of...</p>
                </div>

                <div class="content-block">
                    <img src="http://demo.omnigon.com/christian_bovine/SOLIEF/img/thumbs/thumb3.jpg" alt="">
                    <h4 class="left">Title Number 4</h4>
                    <p>The Historical Documentation Exhibit is now open on Ellis! Come view hundreds of...</p>
                </div>
            </div>    

            <div class="dl-content-right">
                <img src="img/thumbs/ad1.jpg" alt="">
            </div>
        </div>

CSS:

    .dl-content{
    width:940px;
    margin: 0 auto;
    padding: 0 20px;
    overflow: hidden;
}

.dl-content-left{
    width:618px;
    float: left;
}

.dl-content-left .content-block{
    width:307px;
    float:left;
    margin-bottom: 20px;
}

.dl-content-left .content-block img{
    width: 139px;
    float:left;
    margin: 0 8px 0 0;
}

.dl-content-left .content-block p{
    float:left;
    width:150px;
    font-size: 12px;
    line-height: 1.4;
}

.dl-content-right{
    float:left;
    width: 300px;
    margin-left: 20px;
}

.dl-content-right img{
    width: 300px;
}

Answer 1

Я думаю, что это связано с высотой divs, так как высота не была установлена.

Я добавил clear div в него, разделив два набора divs, и теперь он работает:

Демо здесь

Вы можететакже установите высоту на divs, и это также решит проблему:

Демо здесь