CSS Layout with JS Masonry problem

HTML & CSS
1

Hi I’m having problems layout correctly my site. It plays nice when I’m not using the js script masonry, but the #sidebar div seems to be overlapped and not work when the js script is turned on.

What I want to achieve is for the ‘.item’ divs to expand based on the browser’s screen size.

I have attached zip files with the html.

Any pointers would be great : )

2

Not to worry, I got a solution!

3

Would you mind sharing it for the rest of us? It would also help users who happen to search and come across this thread :).

Nice job figuring it out on your own, however. Sorry we were too slow to help :(.

4

I found using the imagesLoaded plugin did the trick.

Using

<code>var $container = $(‘#container’);

$container.imagesLoaded( function(){
$container.masonry({
itemSelector : ‘.box’
});
});
</code>

Hope this helps anyone with this problem : )