Centering a <div>'s content in IE5 Mac

[mordred]

Hello all,

I'm trying to build an image gallery with pictures of different widths. Those images are put into divs which float left, and thus create a band of images neatly aligned to each other. Each image should have a centered caption text beneath it.

The way I did it and how it worked in Moz and IE on Windows, was this:

CSS:

.floater {
	float			: left;	
}

.floater div {
	text-align		: center;
}

HTML:

<div style="width: 500px;">
	<div class="floater">
		<img src="storage/c/11-C-0001-R-1-thumb.jpg" />
		<div>test</div>
	</div>
	
	<div class="floater">
		<img src="storage/v/31-V-0021-X-0-thumb.jpg" />
		<div>test</div>	
	</div>
</div>

However, this does not work on IE5 Mac. It seems as if the text-align rule causes the div to not float anymore and become an ordinary block element. I could recreate the same visual effect by using a table instead:

<div style="width:500px;">
	<div class="floater">
	<table style="border:0px;padding:0px;" cellpadding="0" cellspacing="0">
		<tr>
			<td><img src="storage/c/11-C-0001-R-1-thumb.jpg" /></td>
		</tr>
		<tr>
			<td style="text-align:center;">test</td>
		</tr>
	</table>
	</div>
	
	<div class="floater">
	<table style="border:0px;padding:0px;" cellpadding="0" cellspacing="0">
		<tr>
			<td><img src="storage/v/31-V-0021-X-0-thumb.jpg" /></td>
		</tr>
		<tr>
			<td style="text-align:center;">test</td>
		</tr>
	</table>
	</div>	
</div>

This wil work in IE on Windows as well as on Mac. But resorting to use a table for a simple visual effect seems quite redundant to me, not to mention the increased code size that will be generated. Semantically... you can guess the rest.

So here's my question: Is there any possibility to center text in a floated block element whose width is not known that works in IE5 Mac, but without using the table? Thanks in advance.

[ronaldb66]

No div

You could also not include the caption inside yet another div, but have the image and the caption both in the floated div (class floater) and seperate image and text with a line break. Specify text-align: center for the floater divs and you should be fine. I guess.

[mordred]

Thanks for the suggestion, but this does also cause the <div>s to not float anymore, and each new div is positioned beneath the former one, like if they were normal block elements.

[rmedek]

hmmm... maybe my idea might work. I have a gallery of pics with center aligned-captions as well. The difference is I used an unordered list and used CSS to align everything just so. It's a little messy, but it might help, and it works on all browsers (pretty sure)...

page:
http:richardmedek.com/photos

stylesheet (look under /* photos */):
http://richardmedek.com/style.css

Hope this helps,

Rich