html - Unexplained white space when using clear:both

Question

I'm building a Joomla 1.7 website and I'm using a gallery plugin. This works out real nice except for one problem. In the gallery plugin you can insert a description that is displayed on top of all the images, but whenever I use this I get an enormous amount of whitespace.

http://imgur.com/FGrGi

The HTML:

<div id="phocagallery" class="pg-category-view" style="width:800px;margin: auto;">
   <div class="pg-category-view-desc">Pictures of the Roskilde Family</div>
   <div id="pg-icons"></div>
   <div style="clear:both"></div>
   <div class="phocagallery-box-file" style="height:158px; width:120px;">
   <div class="phocagallery-box-file" style="height:158px; width:120px;">
   <div class="phocagallery-box-file" style="height:158px; width:120px;">
   <div class="phocagallery-box-file" style="height:158px; width:120px;">
   <div class="phocagallery-box-file" style="height:158px; width:120px;">

If I remove the the white space disappears. I look in my css with firebug but I can't for the life of me figure out why it is giving me this white-space. I used the Yahoo css-reset.

EDIT: CSS

div id="phocagallery" class="pg-category-view":

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, blockquote, th, td, p 
{
    margin: 0;
    padding: 0;
}
    body {
    color: #000000;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 75%;
    line-height: 1.3;
}

Anybody have a clue?

Answer 1

You must have a sidebar on the left or the right with a floating element in it (or which is floating itself).

The clear:both causes the element to be under that floating element.

See the problem here: http://jsfiddle.net/9Razw/

One solution is to set overflow: hidden on #phocagallery or a parent of the clear:both element.