It’s fairly easy to stack images with same height with floats, but it’s hard to present them like in the screenshot below if all of them have different heights.
Is there some safe approach to do this. I’ve seen it on some modern websites, but too bad I’ve never checked the code how it’s done! Any ideas?
I’ve seen some cool things with javascript that re-arrange grids dynamically and in motion. But simply speaking, off the top of my head, since all the images in the same column are the same width, you could divide the page in into 3 left-floated columns, and set your different images within the three columns. You could set a margin-right on the columns, and a margin-bottom for the images of the same values. And you could set your columns to a set width and add overflow:hidden in case some images are later added, which are wider than others.
BTW, I don’t thing you would need three different classes for the three columns. Just one class with a set width that was named something like “galleryColumn” or something. Then just set that to float left and add that class three times to your markup in three different divs. Then commence with the plopping in of images.
The layout itself is not hard to do with floats. It’s the expectation that the content would prearrange itself automatically that’s the flaw.
it looks like you are attempting a horizontal grid, so you will need to re size all your images to be the same width in some photo editor ( or you could do some serious # crunching yourself)… this is to prevent snags, or rather so we can take advantage of the snagging effect.
the issue with floats is that an element that later in the code cannot be DISPLAYED higher that a previous floated element. This mean you will have to manually ( using IDs or other identifiers) negatively adjust the vertical margins so as to jostle the images into place.
Other than that you will need to segment your content into 3 columns as SDT suggested.
You could also rely on CSS3, but this would narrow your list of supported browsers greatly. Google :“CSS3 -moz-column”
div#multicolumn1 {
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
column-count: 3;
column-gap: 20px;
}
Setting a 3-column grid is an easy job, but I wonder how that would turn out to submit the photos via CMS and generate a more-or-less evenly height column.
Moreover, I was thinking of applying Responsive Web Design with @media-queries, so it’s not possible to fix with 3 columns, as the photos will stack in 4, even 5 column, depending on monitor resolution.
So yes, I though about the CSS3 trick about the column-count, but it’s not backward compatible, and the end-users might even use IE6 
Maybe I should rally on some really cool jQuery plugin for this?
Yeah making it responsive does add another layer of complexity. I think you would probably have to use a “liquid image” approach to keep them from being too big for smaller monitors, and if you figured that out you may not necessarily need to remove the floats in your media queries.
For the CMS concern, when you say evenly height column what do you mean?
If you want to graduate this to javascript, here is an interesting one: http://css-tricks.com/13372-seamless-responsive-photo-grid/
Hmm the javaScript plugin is awesome, but it still rallys on the new CSS3 properties
By evenly columns height I meant, how will they stack approximately the same in quantity of photos per column, when they are going to be pulled from the database? How should that be achieved with HTML so that it repeats quite the same times per column? It’s kind of hard to explain.
But I guess I can risk and just clip the images to have the height and regular flats will do the job at its best.
I see what you mean. So the CMS is not set up to accept photos by having a user go in and manually upload photos, it’s a database thing. That sounds like it might required javascript to calculate the amount of image elements in the column and use conditionals to place in a different column. That’s a guess, because writing script is not my thing.
It seems there are so subtitles to accomplish this perfectly that, I think, is not worth making the code that complex, where I can just decide to go with photos of same height.
Actually, when I think of it again, I think that it’s worth giving a shot with the CSS3 columns property, and just use alternate CSS for IE users where I can use floats as an alternative.
Now the question is, how to accomplish a fixed columns in a flexible design? I’m using something like:
-moz-column-gap: 20px;
-moz-column-width: 220px;
I’m not setting how many columns to use, as it nicely stacks from 3 into 4 column when the design is stretched. But the issue I’m trying to fix is that it doesn’t stick to the 20px gap, but in fact that’s the minimum gap, and the more I stretch the design, the wider the gap. After 60-70px gap it turn from 3 to 4 column. I don’t get it! Any ideas?