braveheart4 — 2011-11-04T12:17:26-04:00 — #1
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?
sdt76 — 2011-11-04T13:01:30-04:00 — #2
sdt76 — 2011-11-04T13:07:01-04:00 — #3
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.
dresden_phoenix — 2011-11-04T13:43:58-04:00 — #4
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.
1) 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.
2) 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"
braveheart4 — 2011-11-04T14:20:02-04:00 — #5
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?
sdt76 — 2011-11-04T14:35:57-04:00 — #6
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?
braveheart4 — 2011-11-04T15:38:52-04:00 — #7
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.
sdt76 — 2011-11-04T16:04:36-04:00 — #8
braveheart4 — 2011-11-04T18:10:59-04:00 — #9
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.
braveheart4 — 2011-11-20T15:29:22-05:00 — #10
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:
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?