No space between bottom of div and div it is within

Question

I have a div within a div, and when viewing the web page in IE6, it does not display spacing between the bottom of div class="video-tour" and the bottom of div class="content-body"

Here is what it looks like in IE6: http://i42.tinypic.com/20zs7s7.png

Here is what it looks like displaying correctly in Safari: http://i44.tinypic.com/2h69de1.png

The css for .video-tour <-- there are multiple videos that are split up into different boxes as you'll see, they have a width of 31%

.video-tour {
    float:left;
    width:31%;
    border:1px solid #fdbe2f;
    background-color:#ffc;
    text-align:center;
    padding:3px;
    overflow:auto;
    margin:6px;
}

.video-tour img {
    border:1px solid #fdbe2f;
    padding:3px;
}

CSS for .content-body which .video-tour is within

.content-body {
    padding:10px 15px;
    font-size:.8em;
    font-family:arial;
    overflow:auto;
}

Any help as to why there is no spacing at the bottom in IE6 and spacing in other browsers would be helpful.

Answer 1

I believe its because you need to clear the floats.

You could try place a

<div style="width: 100%; overflow: hidden;"><!-- floats go here --></div>

Around the entire content with video-tour's.

Answer 2

Try adding a div at the bottom after video-tour that has a style of clear: both.