CSS-only horizontally equidistant images

[snillor]

It looks like I’ll land two small design jobs this week or next for folks in my art league. These sites will necessarily display a lot of images, and there’s an issue I don’t know how to resolve.

For a fluid-width design, how to I get a “row” of images to center themselves evenly, using CSS but no JavaScript and no tables? (In other words evenly distributed across the row, and with adequate, symmetrical space between them.)

Here are some of the constraints:

1) It’ll be a fluid-width design (with some min- and max-widths for control).
2) The images will be similar in size but they WON”T all be the same width or height, so I don’t think pixel or percentage width units will work. (Landscape-oriented images will need to be wider than portrait-oriented ones.)
3) I want as many images on a row as the viewport width allows, with adequate horizontal separation. I figure there’ll be at least 3 images per row for narrow viewports, and maybe 5-8 for wide ones.
4) Each image will have some affiliated text below it (title, dimensions, price, etc.) that must move with the image when a different screen width causes the image to switch to another row.

I’ve gotten even spacing in a clunky way for fixed-width designs. I imagine fluid-width will use floats, but I don’t know how to get them evenly distributed horizontally.

Thanks

[TheLeggett]

What sort of browser capability is required for this? There are some awesome new ways to accomplish this sort of thing, but many don’t exactly play nice on older browsers, heheh :)

[cpj238]

Usually the best way to have this work is to make all the images the same width through CSS – a default if you will, then simply add margin: 0 auto; to center them horizontally.

Leave the height as the only variable.

I know you said in #2 above that they won’t all be the same width, but heck, why not force it with CSS, there’s no disadvantage to it, and they will scale proportionally if you don’t force a height.

As far as #4 above, you can set a max-height on the images, to standardize it a bit.

Doing what you want in 1-4 without any Jquery help — cross browser — isn’t really possible with just CSS.

Hope you find your way :) (using Jquery isn’t a bad thing if done right)

~ Chris

[snillor]

Appreciate the quick responses, guys.

TheLeggett: I’m definitely NOT supporting IE 6 or older. Other than IE, I’m figuring Firefox, Safari, and Chrome versions 1-3 years old is reasonable. I’m also 100% OK with Progressive Enhancement: producing a “good” baseline display for less-capable browsers, while making it better for newer, more capable browsers. I’ll probably use some CSS3 here and there for the newer browsers, mostly for visual enhancements.

cpj238: I really need to avoid a standard width. Several of the artists and photographers have works that are VERY wide and short, or VERY tall and narrow, and forcing a standard width display will look really odd and they won’t like it at all. (But if I did bite the bullet and enforce one standard width, I’d size the images in Photoshop, not CSS. I’d have more control over things, I believe Photoshop has a better resizing algorithm than browsers do, so I’d be able to use smaller image files and get better quality images.)

Not sure I understand how a max-height on the images will keep the image-details in place underneath.

You may be right about JavaScript being required, but I have to think there’s a pure CSS way. (But maybe it would require too much in the way of extra DIVs or other ugly markup, and then I’d have to decide if it’s worth it.)

[TheLeggett]

Doesn’t sound like many newer solutions will work here, but I would have proposed some Flex Box solutions!

I understand that you take issue with resizing images, but I think it probably should be done (to an extent). Otherwise, the CSS solutions for what you described get quite limited with the amount of information being provided. The staggered look also doesn’t often look very good.

ie: http://i.imgur.com/2vVlt.png

Establishing a few constraints might help make the interface flow a little better. Of course, this is a bit subjective in nature, it could be that this effect is exactly what you need.

If you imposed a maximum height for instance, and made sure that each image filled at least this height, you could do something like this:

http://i.imgur.com/ZKwXl.png

(Tested in latest Fx, Chrome and IE)

Of course, there will probably be trouble in previous browser versions requiring a bit more work.

If you could use javascript, it would be a little more feasible to size images on the fly properly.

[csstrickster]

Hi Snillor! This threat has not been active in a while but I am curious if you found a solution to your issue?

[Author]

Posts