How do I evenly space images with a left floating margin?

IE6 can't do it in main content when have a "float:left" index

[jezzer300]

I have exactally the same problem as someone else, which went unanswered, can any one help?

this is the old post:
[webmasterworld.com...]

In Brief:
Fluid design.

I have a left margin for my site index (float:left)
I want 3 images to appear in my main content. 3 to appear in row, centered, evenly spaced. Just like you used to do with tables before css. If the user resizes the window too small, the image needs to be cut off (overflow:hidden etc), not jump down to the line below.

I can't use a float for the image as it'll jump below the left index on resize.

I can't use % widths as 100% is 100% of the body and not the container.

Can it be done?

[jezzer300]

The below works in FF, but not IE6:

FF: right hand side of images are cut off as window is reduced
IE6: images are not hidden or width:auto doesn't work

<div style="width:auto; height:190px;overflow:hidden; margin: 0 auto;">
<div class="nowrap">
<img src="x1" width="129" height="190">
<img src="x2" width="233" height="190">
<img src="x3" width="155" height="190">
</div>
</div>

[jezzer300]

fixed.

* The key to fixing IE6 was having a slightly less than 100% width to cater for IE6 padding/margin problems.
* overflow:hidden correctly chopped the images
* white-space:nowrap forces the pictures in a row what ever alignment the browser is after.

<div class="center" style="width:97%; height:190px;overflow:hidden; margin: 0 auto;">
<div style="white-space:nowrap">
<img src="ix1" width="129" height="190">
<img src="x1" height="190">
<img src="x1" width="155" height="190">
</div>
</div>