Extra space at the bottom of div float container

Question

This is the current setup:

<div id="youtubelatestnews">
    <div class="box youtubebox">
    </div>

    <div class="latestnews">
    </div>

    <div class="clear"></div>
</div>

But the problem is the container <div> which is "youtubelatestnews" has too much space at the bottom.

Here's the site: http://voila.easywebprojects.com/

The <div>s I'm referring to are the sneak peek & Latest News portion.

Answer 1

The reason for the extra space is the clear div, which will clear below the elements on the left also.

You can remove the clear div, and use overflow: hidden; on the #youtubelatestnews div. As you don't have a height specified for it, the overflow style will only make the element contain its children.

Answer 2

Try to add float:left; style to youtubelatestnews div, it worked for me ;-)