So I’m back to the CSS blues I encounter every time I try to follow the ‘web standards’ crowd. I’ve got a relatively straightforward problem which is solved with using tables to arrange images, but seems utterly broken trying to use tableless CSS. Perhaps someone here will set me straight.

I am displaying search results – thumbnail images and text. Putting each set of data in a div tag with a class that has a float:left in it allows me to just keep rendering the image/text combos, and the browser will wrap the data accordingly. Except that the float:left behaviour will float the data to the left not to the ‘beginning’ of where the first element started, but only as far left as it needs to to determine it’s ‘hit’ something. Hard to explain in English, but the screenshot below should give an idea. The two items on the bottom row should be flush left, but they’re not. The first result image has text which is a bit more than the rest on that row, so it ‘blocks’ the 7th result item from floating any further left.

Searching around for the answer has yielded nothing that matches my requirements:

1. I want to be able to change the size of the items and data being displayed without having to know in advance how many will fit on a row.

Well, that’s really about it. To be fair, even in a table situation, you have to know how many you’ll be displaying, then close and reopen a TR tag. Given the supposed ‘superior’ nature of CSS, I’d have figured this problem would have been solved. I can also issue a div with a clear:both style after every 6 results, but that’s a hack answer, in my view.

Any better solutions? Google images uses tables to show their results – that should send a message to all those “tableless design at all costs” nuts out there (message being “css still isn’t ready enough to bury tables yet”) but it won’t.