Extra space at the bottom of div float container

This is the current setup:

<div id="you开发者_StackOverflow中文版tubelatestnews">
    <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.

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.

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

The margin-bottom on .box-product > div plus the margin-bottom on .box are combining.

The extra space can be caused by the default height of clear item sometimes, Try to add height:0px for the clear .

https://jsfiddle.net/8zpt7tm3/