pairing captions to the left of variously sized images

[Abby]

Here's the page. Is there any way to float or position:relative the caption class, so each caption sticks directly next to each image? I've got each caption & image wrapped inside a .center div, and then each caption has a ul class="caption", so it looks like this in HTML:

<div class="center"><ul class="caption"><li>Personal project<li>3D Studio Max</ul><img src="images/shuttle.jpg" width="560px" height="331px" alt="low poly shuttle"></div>

CSS:

.center {width:80%;text-align:center;padding:0;margin:0;overflow:hidden;}.center img {margin-left: -180px;}.caption {	width:180px;	float:left;	position:relative; z-index:3;  font-size:0.5em;  text-align:left;  padding:0;  margin:0 0 0 12px;  z-index:3;}.caption li {  list-style:none inside none;}

I guess part of the problem is that each image varies in size. I'd like the captions and images to be next to each other on the page, while still remaining centered. Can anyone suggest a way to achieve the result I want?

[dsonesuk]

if you make the images the same width, this could be done by including the image in the actual caption ul li list, then use postion absolute to position caption left of the image.

.center img {margin-left: 0;}ul.image_list {list-style:none;}ul.image_list li{list-style:none;width:460px; position:relative; margin:0 auto;}ul.image_list ul {position:absolute; top:0; left:-180px;}ul.image_list ul li{ width:auto; margin-left:auto;}<div class="center"><ul class="image_list"><li><img width="460" alt="low poly pig character" src="http://art.abbygoldsmith.com/images/Pig_Shrek.jpg"><ul class="caption"><li><a title="Shrek: Ogres and Dronkeys" href="http://ds.ign.com/objects/959/959144.html">Shrek: Ogres and Dronkeys</a> - Nintendo DS, 2007</li><li>Made at WayForward Technologies</li><li>3DSMax</li></ul></li></ul></div><div class="center"><ul class="image_list"><li><img width="460" alt="low poly shuttle" src="http://art.abbygoldsmith.com/images/Shuttle.jpg"><ul class="captiongreen"><li>Personal project</li><li>3D Studio Max</li></ul></li></ul></div>

[Abby]

Interesting, interesting. Sometimes this stuff is so mysterious to me, when it works.I entered the width of the narrowest image, 326px. That caused them to all line up in a nice verticle column, aligned perfectly with their captions. I'm not sure why the widest images, at 640px, are still displaying fine, rather than being condensed or chopped off. But if it works, it works.One thing is clear: This CSS won't work for every page of images I have, since my images widely vary in size. I can't do anything about the different sizes; I just have to display it in a layout that looks okay.

[dsonesuk]

unless you use a server script language php, or javascript to get width of image/container to make the necessary changes.