Extra space at the bottom of the container for div floats

Question

This is the current setting:

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

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

Here is the website: http://voila.easywebprojects.com/

<div> I mean the section "Voyeur" and "Latest News".

Answer 1

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

You can remove the clear div and use overflow: hidden; in the div #youtubelatestnews. Since you do not have the height specified in it, the overflow style will only cause the element to contain its children.

Answer 2

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

Answer 3

Attach to the bottom on .box-product > div plus the bottom border on .box .

Answer 4

Extra space may be caused by the default height of a clear element. Try adding height:0px to clear it.

https://jsfiddle.net/8zpt7tm3/