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.