Inline Blocks - Will this accomplish a tablesque look?

This isn't your ordinary 'tables in css' question

[digitalv]

So here's what I want to do: Using either LI's or DIVS (no preference, really) I want to simulate the look of a table for displaying products, however not set a fixed limit on the number of columns - however many will fit in the width of the containing div is the number I want to use, then once it's full move down to the next row.

Sounds simple enough... HOWEVER, there is a twist:

1. I don't know how many products there will be.
2. I don't know the height and width of the images that will be used - they will all have a maximum width and height, but there won't be any way of getting that number into CSS.
3. I don't know how long the descriptions will be.

Using fixed heights is out of the question, and since I don't know the content size, container width, or number of products I can't specify how many "columns" in advance.

BUT - I want each of these "cells" to be the same width and height in the end when the page is rendered. And naturally this needs to work in all browsers without a ton of hacks.

Possible?

[rocknbil]

How are you outputting the data? Is it your own programming?

BUT - I want each of these "cells" to be the same width and height in the end when the page is rendered.

Not likely to happen, on the one hand, you say you don't know the width of the cells so it will vary, on the other, you say they all have to be the same. These are a bit contradictory . . . you need to pick one. Or just use tables. Think about this: if you were to figure this out, you'd need to pre-fetch all the products for this page, do everything below to get the widest width, then output an inline style for the cell widths. A massive amount of calcs, really . . . then consider it gets complicated in multiple pages.

The width is a bit troublesome, not so much the height . . . . but if you program it yourself, you can do something like (pseudo-code:)

$page_width="750";
// You're going to need this, somehow. 100% won't work.
// If that's the case, use the max-width property.
// Unsupported by IE6, but . . .

$this_row = 0;
while ($row = [database results]) }

if ($this_row == 0) {
$output .= '<div class="container-row">';
}

// you would get the image size by ImageMagick
// or the GD toolkit. $width_allowed_for_text and
// $width_allowed_for_padding will have to be hard
// coded as a config, and coincide with your style sheet.

$thisdiv = $image_width+$width_allowed_for_text+$width_allowed_for_padding;

$this_row+=$thisdiv;

if ($this_row >= $page_width) {
$output .= '
<div class="clear-div"></div> <!-- clear: both; -->
</div>
';
$this_row=0; // resets for next row
}

// Make sure this comes AFTER determining the calcs above

$output .= [your product entry];

} // end of while loop

// now do something in case the last row was not closed.
// don't just add a </div>, this can cause a validation
// error (and broken layout.) If you want cross browser
// without hacks, validation [validator.w3.org] is paramount.

if (($this_row > 0) and ($this_row >= $page_width)) {
$output .= '</div>';
}

echo $output;

So basically, as you output products, you need to calculate the width - somehow - and if it exceeds the parent container width, end that container, reset the "$this_row" to zero for the next row.

A clearing div will be required since the heights vary, but it will not be required if you float the row container. Or, you **could** use the overflow property, but that may cause unexpected scrollbars or chopped content.

Actually this is a better method than tables simply because you won't have to have the columns align, I've had these before. You can get something like

¦ product 1 ¦ product 2 ¦ product 3 ¦ 
¦ product 4 . . . . . . ¦ product 5 ¦ 
¦ product 6 ¦ . . . . . . . . . . . ¦ 
¦ product 7 ¦ product 8 . . . . . . ¦ 
¦ prod. 9 ¦ prod. 10 ¦ prod. 11 ¦ 12¦