Why my site lost its grid layout alignment. It'

Question

I created a gallery page. It displays images with variable heights. As suggested here to use a masonry plugin i used masonry plugin. It worked great till last night.

But this morning when i checked it again i lost the alignment. No alterations done to the site since past 3 days. Here is the snapshot.

Earlier, all div's are automatically adjusted(The marked spaces were eliminated) and the display looked like

http://pinterest.com/

But all of a sudden my site lost its alignment. Unable to figure out the issue.

What might be the issue .... Please help me. In a big problem with my site

Here are the css alignment and masonry application

#body {background-color:#1c4d5c;padding:10% 0% 20% 20%;}
#imagesection
{
margin:10px 10px 10px 10px;
float:left;
width:214px;
border: 5px solid #f0f0f0;
background-color:#d2dbde;
border-radius:5px;
}

var $container = $('#body');

$container.imagesLoaded( function(){
  $container.masonry({
    itemSelector : '#imagesection'
  });
});

Masonry doesn't work in IE 8

Note: I am using codeigniter, Hence i am loading header, body, footer etc files in view.

Answer 1

Try to use only required class from masonry plugin like .box .col2 ...

Other classes might effect your total alignment..

Answer 2

It looks to me like the surrounding container is too big. Adjust the width to something smaller again. You can see on the right border the tiling algorithm so I guess masonry works perfectly.