I am trying to create a simple image collage and need to use Masonry because of this issue: div grid of squares, float:left issue (image included).
I thought it was very straightforward but I cannot figure out what is wrong with my implementation: http://classicopia.ivointeractive.com/. The picture of the house at the end of the path should be in that upper right hand corner. The spacing is perfect (970=2*291+388) and the image gets position there via its float:left property, but the masonry script pulls it out of place.
If I increase the width of the entire container, those two images stay stacked, but move to the right. Does this mean masonry is only creating 2 columns no matter what? How would I change this number?
Masonry needs equal width columns to work properly. The .masonry-bricks are arranged in the #container in the order as they appear in the DOM. If you have large .masonry-bricks spanning two columns or one and a half columns, you will not get a proper fitting layout; see also your “Fall Styles…” .col6 div that can’t fit.
See http://masonry.desandro.com/demos/basic-multi-column.html to understand when and why gaps can occur. You will see that any number of columns is possible, but the layout depends on a basic column width and elements matching that modularity with a smallest common divisor for the .masonry-brick width.
A fixed width #container, as in your case, does not make a lot of sense, because the purpose of Masonry is to enable a flexible layout on browser window resize across browsers and devices. You can have a centered #container, though.
See also https://stackoverflow.com/a/12525917/963514 for similar issues.