Row Of Images With Captions

[curtiss]

I'm looking for a good way to create a row of images, each with a caption underneath.

Obviously, I'm trying to avoid the use of tables, so I'm having a little trouble.

Normally, if I were using tables, the code would look something like:

<table>
<tr>
<td>
<img src='myimage1.jpg' alt='myimage1' />
<p>This is my first image</p>
</td>
<td>
<img src='myimage2.jpg' alt='myimage2' />
<p>This is my second image</p>
</td>
<td>
<img src='myimage3.jpg' alt='myimage3' />
<p>This is my third image</p>
</td>
</tr>
</table>

However, since those images are not actually tabular data, I'm trying to avoid the use of tables. That leaves me in somewhat of a delicate position. Normally, if I were just trying to create a row of images, I would use either inline divs or an inline unordered list. However, the fact that I need to have captions underneath each of those images makes that impossible.

Why does that make it impossible (at least, as far as I can tell)? Here's why: In order to add a caption underneath the image, I have to use a block level element (in other words, in order to start a new line after the image). If I use a block level element, that breaks my line, which causes the next image to either go on the same line as my previous caption, or it causes my next image to go on its own line.

Any help from anyone that's already made the switch to completely tableless layouts would be greatly appreciated.

[Leprakawn]

I looked for my previous post to help that science dude, but I could not find it. I recall his solution going a little like this

<div style="float:left; width:#; height:#; text-align:center;"><img src="file.ext" /><br />Description 1, 2, 3</div>

[\Kritikal\]

You could also use an unordered list and set the display to inline for the list item children. Inside your list item just have your standard:

<div><img src="blah.jpg" /></div><div>Caption</div>

I put each in it's own div because really, you're dividing the list item into divisions. Makes for good semantic code.

[curtiss]

Unfortunately, at least the way I just tried that, it puts the images in a column together, rather than putting them in a row together.

I fear that the only way to achieve this is to either build the captions into the images (which is not really an option), or to put the images into a table.

If you want to see what I'm trying to do, you can check out http://dev.dcevolution.net/index.php...lection_dsvol1 for an example. The three screenshots at the top of that page need to be in a row together like that, with captions underneath each image. When the site is finished, there will be about 40-50 pages all with screenshot rows like that.

[\Kritikal\]

This worked for me:

http://kritikal.dyndns.org/temp/thum...humbnails.html

[curtiss]

You're right. That appears to have worked almost beautifully. The only two problems I have now are:
1) I can't center the row of screenshots. Not a biggie, but it would have been nice to have the screenshots centered within the containing block.
2) If you resize the window to a smaller size, the screenshots then get stacked on top of each other, which is fine, except that the padding and margins don't seem to apply properly when that happens, so my bulleted lists end up with the bullets inside of the screenshot divs.
Like I said, the first one's not a huge deal, but I really would like to find a way to fix the second problem. Any thoughts? I really appreciate your help.

I also played with a couple other ideas on how to layout the page with screenshots. Here are some pics of what the various items look like:

Layout 1 (with the screenshots in a row, as we've been discussing in this topic):


Layout 2 (with the screenshots in a column down the left side - problem #2 I mentioned above is present within this layout, too, though):


Layout 3 (with the screenshots in a column down the right side - problem #2 mentioned above doesn't exist in this pic, but the text still goes right up against the borders of the screenshot divs):


Here is an isolated shot of Problem #2 I mentioned above:


What are your thoughts?

[\Kritikal\]

Try putting a div in with the rest of the thumbnails:

<div style="clear: both;"></div>