[WSG] Centering a liquid grid of image thumbs and captions

[Nick Gleitzman]

Hi All

I was interested to see Mike Pepper's post on June 1 (IE Max-width Emulation and Auto Centre) - particularly the auto center bit - because I've been wrestling with pretty much the same problem, and it's driving me nuts.

I understand Mike's aim to be to take the whole set of thumbnail/caption pairs (li's) and have them remain centered in the enclosing box, with individual pairs rewrapping as width is resized. If you resize his page now, you get more space on the right until eventually one li jumps from bottom row to top. <http://www.english-sofas.co.uk/els_new/contemporary_leather_sofas_1.htm>

I've been trying to emulate, with CSS alone, what I've been doing for years with tables: create a grid of thumbnails, each with a caption below, both image and caption linked to an enlargement. We all know how easy that is; center the table, center the cell content vertically, add some cell padding. Bingo.

But with CSS? Man, the most frustrating thing is the time I've spent on this. "CSS is quicker. CSS is better." Unnghh... I love CSS - don't get me wrong, I'm a staunch advocate - but this is definitely counter-productive in the context of trying to produce a deadline-driven result. </rant>

What I've been doing is trying to come up with a hybrid of the 'Centered list navbar' <http://css.maxdesign.com.au/listamatic/horizontal16.htm> from Russ's Listamatic and the Floatutorial #4 'Floating an image thumbnail gallery' <http://css.maxdesign.com.au/floatutorial/tutorial0407.htm>.

See my own tests at <http://www.omnivision.com.au/test/thumbs_ul.htm>; CSS is at <http://www.omnivision.com.au/test/thumbs_ul.css>.

Like Mike, I'd love an elegant solution to this - preferably using a list. It's possible to do it with nested divs, but I feel that the bloated code that results from doing it that way goes against the principle of CSS.

Any takers?

A parting thought: does a series of thumbnail/caption pairs actually qualify as tabular data - thus leaving me feeling better about giving up and using a table to lay the bloody thing out anyway?

Thanks...

Nick Gleitzman

PS 1st post to the group... thanks to all for the time and effort. See you on the 10th.
___________________________
Omnivision. Websight.
http://www.omnivision.com.au/