Weird gap above floated images. Can’t make it go away.

I’m trying to finish a project I’ve been working on for weeks. I’m almost there, but this float problem is hanging me up. Here’s how it goes…

I am creating a grid of excerpt images. (see https://budgetgallery.org/sf/artists/ ) The user will click on an excerpt image to load the whole post. I used this article – https://www.alistapart.com/stories/practicalcss/ – to create the grid. The grid is showing up great, however, there’s this huge gap above the images. What’s the deal. I can not figure out why it is showing up there.

The relevant page code is here:
<div id="container">
<div class="spacer">&nbsp;</div>

<?php if (is_category()) { $posts = query_posts($query_string . '&orderby=title&order=asc'); } ?>
<?php if ($posts) : foreach ($posts as $post) : start_wp(); ?>
<div class="float">
<div class="gallerybox">
<div class="img-bkgrnd"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>">
<?php echo $post->post_excerpt; ?></a></div>
<p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><span class="h2"><?php the_title(); ?></span></a></p>
</div>
</div>

<?php endforeach; else: ?>
<p><?php _e('Sorry, no pages matched your criteria.'); ?></p>
<?php endif; ?>
<div class="spacer">&nbsp;</div>
</div>

If you need to see more, let me know. I’d love to be able to solve this. Thanks in advance.