[thelist] [CSS] Creating table free CSS image blocks

[Dan Eastwell]

Hi,

I've got some generated content that I'd like to style as a block of 
image thumbs (three in a row), with their respective captions above them.

I've decided that using a list of thumbs and captions  (which in 
themselves are a list of items) would be using the correct semantic 
XHTML to write this up. The php used to generate the lists breaks them 
at the maximum number of thumbs per row, which currently is 3.

So I have:

<ul class="image">
  <li>
	<ul class="imgthumb">
		<li class="imgtitle">Title 1</li>
		<li><a href="/profiles/index.php?profile_id=1" title="Title 1">
		    <img src="/photos/thumbs/image1.jpg" alt="Title 1" class="thumb" />
		    </a>	
		</li>

	</ul>
  </li>					
	
 <li>
	<ul class="imgthumb">
		<li class="imgtitle">Title 2</li>
		<li><a href="/profiles/index.php?profile_id=2" title="Title 2">
		    <img src="/photos/thumbs/image2.jpg" alt="Title 2" class="thumb" />
		    </a>	
		</li>

	</ul>
  </li>	

  <li>
	<ul class="imgthumb">
		<li class="imgtitle">Title 3</li>
		<li><a href="/profiles/index.php?profile_id=3" title="Title 3">
		    <img src="/photos/thumbs/image3.jpg" alt="Title 3" class="thumb" />
		    </a>	
		</li>

	</ul>
  </li>		
</ul>

I'm tring to use both the image and imgthumb classes to style this as three images horizontally in a row with the titles above the images.

Using:

ul.imgthumb li{
	list-style: none;
	}
ul.image {
	display: inline;
	list-style:none;
	}

Gives appropriate styling on the imgthumb lists but the image list still displays as a list wrapping the content after each imgthumb list.  How can I ensure the image lists don't break at each <li>?

Any ideas very welcomed..

Thanks,

Dan.