Aligning tumblr posts in masonry grid

Question

I was trying to make a theme for my tumblr blog, which should look like this

Menubar and sidebar is ok, but I am having a little problem in aligning the posts as in the picture above, but i ended up having this in my blog. Please help me. I am using codes as....

CSS :

#content{
width:900px;
top:65px;    
left: 10px;
float: left; 
position: absolute;
}

#container{
float:left;
background:#000;
width: 900px;
margin: 0px auto;
left:10px;
}

.entry {
float:left;
width: 350px;
overflow:hidden;
margin: 15px; 
padding: 15px;
background: {color:box};
display: inline-block;
position: relative;
z-index:2;
-webkit-border-radius:3px;
   -moz-border-radius:3px;
   border-radius:3px;
}

.entry img {
display: block;
width:auto;
max-width: 100%;
}

HTML :

<div id="container">
<div id="content">
<div class="autopagerize_page_element">
{block:Posts}
<div class="entry">
{........Different types of posts........}
</div>
{/block:Posts}
</div></div></div>

JQUERY :

<script src="http://static.tumblr.com/82upcij/4Kio3rj0h/masonry.js"> </script>

<script type="text/javascript">
$(window).load(function () {
$('#content').masonry(),
$('.masonryWrap').infinitescroll({
navSelector    : '#pagination',  
nextSelector   : '#pagination a#nextPage',
itemSelector : ".entry, .clear",
bufferPx : 40,
loadingImg : "",
loadingText : "Loading",
},
function() { $('#content').masonry({ appendedContent: $(this) }); }
);
});
</script> 

Answer 1

You're not using Masonry correctly. Essentially, you're calling it, but not passing it any parameters so it doesn't know what to do. You're also calling it on the wrong element. Your problems with infinite scroll, which you didn't ask about, are another matter, but here's how you'll want to fix that Masonry call:

$(".autopagerize_page_element").masonry({ itemSelector: ".entry" });