[css] rozmieszczenie zdjec w kolumnach Opcje

[lutador]

Witam,

mam problem z prawidlowym rozmieszczeniem obrazków. Chcialbym ulozyc je tak:

X X X
X X X
X X X
...........
a mam tak :/
X
X
X
X
...

[HTML] pobierz, plaintext 
 
.katalog ul { 
  list-style-type:none;
  overflow: hidden;
 
}
 
.katalog li {
  background: none;
  clear: none;
  margin: 0;
  position: relative;
  padding-left: 11px;
  padding-bottom: 20px;
  width: 50px;
}
.katalog li.First {
  padding-left: 0;
}
 
<div class="katalog">
<ul>
 <li class="First"><a href="image/katalog/kat-1.jpg" rel="lightbox" title="Katalog strona1"><img src="image/katalog/kat-1.jpg" width="200" height="140" alt="Katalog" /></a>  </li>
 
 <li><a href="image/katalog/kat-2.jpg" rel="lightbox" title="Katalog strona1"><img src="image/katalog/kat-2.jpg" width="200" height="140" alt="Katalog" /></a>  </li>
 
 <li><a href="image/katalog/kat-2.jpg" rel="lightbox" title="Katalog strona1"><img src="image/katalog/kat-3.jpg" width="200" height="140" alt="Katalog" /></a>  </li>
 
<li class="First"><a href="image/katalog/kat-1.jpg" rel="lightbox" title="Katalog strona1"><img src="image/katalog/kat-1.jpg" width="200" height="140" alt="Katalog" /></a>  </li>
 
 <li><a href="image/katalog/kat-2.jpg" rel="lightbox" title="Katalog strona1"><img src="image/katalog/kat-2.jpg" width="200" height="140" alt="Katalog" /></a>  </li>
 
 <li><a href="image/katalog/kat-2.jpg" rel="lightbox" title="Katalog strona1"><img src="image/katalog/kat-3.jpg" width="200" height="140" alt="Katalog" /></a>  </li>
 
</ul>
</div>
 
[HTML] pobierz, plaintext 

[Pilsener]

Jak chcesz ułożyć obrazki w wiersze i kolumny to użyj tabeli, po co kombinować? Tabela ma tą zaletę, że dopasowuje się do okna i możesz łatwo zmienić liczbę wierszy oraz kolumn bez ekwalibrystyki w CSS. A width i height w <img> nie lepiej zrobić w css, jeśli wszystkie mają mieć identyczny rozmiar?