View source to see the details. It's very slightly tricky because the last line of a "text-align:justify" element is not fully justified, so you need force it to wrap. In my test file I used a generated "spacer" element to do this. In practice you would probably hide this element by setting its height to zero or something.
One nice thing about this is how it continues to work even as you resize the container so the children don't fit on one row. (Resize your browser window to try it.)
Hmm, messing around with this at the moment. Your test case works in IE 7 (fired up VMWare to give it a spin -- noticed my example code actually doesn't, but the real widget does), but I still haven't gotten it working with real images. I'll update here once I see if I can get that going.
As an addendum, in the non-contrived case (the one the widget actually uses) it also allows text to spread beyond the width of the image above it unless it's on the extreme edges; I haven't yet thought through if that'd be possible with this or using td spacers with a little extra finageling.
I quite doubt there's a way to do overflowing text like that with only CSS without nastiness. Though, someone, correct me if I'm wrong; I'd be fascinated to learn how, if it's possible.
Though it's giving me a 4px taller container for the images than is needed :\ (forgive me if I'm missing something obvious there) It works on Safari 4 w/o the widths or the height, too, all that's needed are justify, inline, and that spacer (nice catch, that).
looks pretty consistent, for the most part. Probably breaking on inline-divs where it's failing. (and Opera is the only top-aligning one...? maybe that's a user stylesheet issue.)
You can do the overflowing labels by given the label box a negative left and right margin. Or a negative right margin and a corresponding relative position.
Of course, this gives you no guarantee that there wouldn't be two overlapping labels in adjacent products. To test for and prevent that, you would still be on the hook for some JS, but it would be much simpler than the JS that's already in place. Basically just some jQuery to step through the pairs of adjacent objects and check the overlap of the internal spans containing the text.
http://limpet.net/mbrubeck/projects/justify-block.html
View source to see the details. It's very slightly tricky because the last line of a "text-align:justify" element is not fully justified, so you need force it to wrap. In my test file I used a generated "spacer" element to do this. In practice you would probably hide this element by setting its height to zero or something.
One nice thing about this is how it continues to work even as you resize the container so the children don't fit on one row. (Resize your browser window to try it.)