Floatede elementer med forskellig højde

Jeg har en stribe div'er (billeder og tekst), som jeg har stylet med float:left;. De rykker fint op på siden af hinanden, men da de ikke har samme højde, placeres rækken neden under, udfra den længste ovenover, hvilket giver et upassende mellemrum.
Jeg ville gerne have, at de hver i sær ignorerede den længste i rækken over, og blot indtog deres plads efter det element, der var lige ovenover.
Hvordan styler jeg mig ud af dette morads.
Siden kan ses her: http://www.web-legestuen.dk/havkajak2014/index.php

HTML:
<div id="samlet_boks">
<?php
if($stmt=$mysqli->prepare("SELECT * FROM `arrangementer` WHERE `forsidevisning`=? ORDER BY `arrangementsnummer`ASC"))
{.........
?>

<div id="wrap_sketogsker">
<div class="forsideblokke">
<img class="arr_billed" src='<?php echo "uploadede_filer/$billede" ?>' title="<?php echo $arrangementsnummer; ?>" alt="" /> 
<div class="arrangement"> <?php echo "$arrangementstype"; ?></div>
<div class="arr_beskrivelse"> <?php echo "$beskrivelse"; ?></div>
<div class="link_til_arrangement"><?php echo "$vis_link"; ?></div>
</div> <!--forsideblokke-->
<?php
    }
    $stmt->close();
}   
?>
</div> <!--wrap_sketogsker-->
</div><!--samlet_boks-->

CSS:
#samlet_boks{
margin-left:15px;
}

#wrap_sketogsker{
width:920px;
margin-left:auto;
margin-right:auto;
}

.forsideblokke{
width:289px;
float:left;
margin-right:15px;
margin-top:25px;
background-color:#ffffff;
} 

Hjælp.......