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