css floats, not floating? - css

Question

I have some Divs floating but for some reason the 3rd DIV doesn't go under the 1st DIV. I can't figure out why? I think it has something to do with the images. When the images are not in, they float fine.
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

I think its to do with the heights of the divs, as a height hasn't been set.
I added a clear div into it, separating the two sets of divs and it works now:
Demo here
You can also set a height on the divs and this would also solve the problem:
Demo here