Question

I keep struggling with masonry. It seems it is trying to do it’s work, but it’s not aligning properly. I have been trying to fix it for hours now. I searched here and found people with the same problem, but the solutions didn’t work for me. Here is all the code:

<div id="container">
    <?php while (next_news()): ?>
<div class="newsitem">
<span class="newstitle"><?php printNewsTitleLink(); ?></span>
<span class="newsdate"><?php printNewsDate(); ?></span>
<span class="newscontent"><?php printNewsContent(); ?></span>
</div>    
    <?php endwhile; ?>
</div>

CSS Code:

div.newsitem {
    width:215px;
    text-align:justify;
    margin:5px;
    padding:15px;
    float: left;
    font-size:12px;
    background-color:#FFF;
}

#container {
    display:inline-block;
}

Here’s the script, I did try to give the columns a width or change the Gutterwidth, but nothing worked:

My Script:-

<script>
$(function(){
$('#container').masonry({
itemSelector: '.newsitem'
});
});
</script>

And here the included files to make it all work:

<script src="<?php echo $_zp_themeroot; ?>/js/jquery-1.7.2.min.js"></script>
<script src="<?php echo $_zp_themeroot; ?>/js/jquery.masonry.min.js"></script>

And where it should be working: http://dagloos.com/lust/index.php?p=news
Please help me, I would really appreciate it. I’m about to pull out my hair over this.

Answer 1

I figured out what the problem was!

<script src="<?php echo $_zp_themeroot; ?>/js/jquery.masonry.min.js"></script>

Just had to be placed AFTER the fancy box script.