Aligining multiple images on a single line with CSS

Hi,

I'm trying to align multiple thumbnails in a single line with CSS. I wonder how it is being done.

Let me write some code:

HTML

<div class="maincontainer">
<ul class="ppix">
<li caption="4 Physical Elements"><a href="../images/3dillus_4elements.jpg></li>
<li caption="Disco Poster Freak"><a href="../images/3dillus_discoposter.jpg></li>
<li caption="Intergalactic Whirlwind"><a href="../images/3dillus_whirlwind.jpg></li>
</ul>
</div>

CSS {}

I wanted to align 3 to 4 images on a single line and then the rest to flow below the first line. I have the freedom to adjust margin and padding to see how close the images are arranged. Also, wanted to include a caption below each thumbnail.

Is there a way to be done on a multiple column list instead of using multiple divs?

in your css

Assuming you have variable heights, that won't be enough because each new line can look severely messed up and not even have 3 in a line because of the float interfering.
You're either going to want to span every 3 images and float that as well, or simply put 3 images in your <li>.