This seems like it should be easy but I have been working on this forever and have, in fact registered with this nice forum, to see if anyone here has ideas on how to do this.

I would like to have a picture gallery on a html/css page.

I would like the page to be able to handle being narrow (say 500px) or wide (1500px), gracefully -- by having pictures (with optional captions) sit next to eachother if there is room and flow down onto a next row if there is not.

I don't know whether I can put example html in here but I will try.

I have made each picture with its caption like this:
<div class="flow">
<table>
<tr><td>
<img src="pix.jpg" />
</td></tr>
<tr><th>
This is the caption.
</th></tr>
</table>
</div>

Tables will not sit next to eachother unless they are inline so I have tried making
div.flow {display: inline}
but the the table jumps outside of the div (in firefox for example).

And if I make
div.flow table {display: inline},
The picture jumps out of the table.

Any Ideas?

Thanks