Div + JQuery не очищается

Я использую JQuery Masonry на своем веб-сайте, и он отлично работает на странице, за исключением того, что ячейки не очищаются после последнего. Вот код, который я использую:

<script type="text/javascript" src="scripts/jquery.masonry.min.js"></script>        
<script type="text/javascript">
$(document).ready(function(){
  $('#pageMain').masonry({
    // options
    itemSelector : '.post'
  });
});
</script>

<div id="pageMain">
    <?php
    <div class=\"section halfSection post\">
        <div class=\"sectionInner\">
            <img class=\"photo190\" src=\"content/news/$article_photo\" alt=\"\" />
            <div class=\"cover190\"></div>
            <div class=\"shadow190\"></div>
            <div class=\"newsTitle\"><strong>$article_title</strong></div>
            <div class=\"newsArticle\">$article_article ...<br><a class=\"newsLink\" href=\"article.php?id=$article_id\">Full Story</a></div>
        </div>
    </div>

    { x 20 }

    ?>
    <div class="clearLeft"></div>
</div>

.post{
position: relative;
float: left;
}
.clearLeft{
clear: left;
}

Есть идеи, что может быть проблемой?