List images in HTML table using 'float: left'

Question

I have a number of images of very differing height and width that I need to display in a web application's dialog box.

Putting the images into a table won't look good, as some very wide images will stretch the whole column, producing a ridiculous looking result.

Making all images float: left comes very close what I want to achieve: All images are next to each other, and when there is no space any more horizontally, the next image will move to the next row.

The problem is that this - moving to the next row - is not guaranteed due to the varying heights of the images. Usually, the remedy to this is clear: both but with float: left I can never know when I need to set clear: both because I do not know the pictures' widths.

THe only way around this that I can see is programmatically calculating each image's width (using PHP or Javascript), and when the horizontal space is full, injecting a clear: both. That is quite resource intensive, though, and I would love to be able to solve this without it.

Is there any way to achieve this using pure CSS?

Is my question clear enough and easy to understand? If not please comment and I will clarify.

Edit: Thanks for your input folks. Using display: inline on the images works fine. This adds a few other issues but in principle, this is the way to go.

Answer 1

Unfortunately no, you will have to use either server side scripting or client side scripting to solve this problem.

Answer 2

Consider forcing them to thumbnail formats of fixed width/height and add a link/onclick to show the full image in a dialog.

E.g.

<img src="img1.jpg" width="100" height="75" onclick="window.open('img1.jpg')">
<img src="img2.jpg" width="100" height="75" onclick="window.open('img2.jpg')">
<img src="img3.jpg" width="100" height="75" onclick="window.open('img3.jpg')">
...

You could even make use of lightbox to have a nice slide / auto-sized presentation.

Answer 3

display:inline on the images will let them wrap around to the next line based on the container's fixed width