2

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?

Community
  • 1
  • 1
Cbas
  • 6,003
  • 11
  • 56
  • 87

1 Answers1

1

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.

Community
  • 1
  • 1
Systembolaget
  • 2,514
  • 2
  • 21
  • 37
  • Thanks for explaining. I guess that defeats the purpose of using Masonry - I'll just do the whole page in absolute positioning – Cbas Sep 23 '12 at 16:56