[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 

[lutador]

Nie dziala to dobrze :/ jak float: left; jest w katalog li to wszystkie zdjecia sa w jednej poziomej linii. Jezeli jest w katalog first to tylko te zdjecia sa w poziomej linii (zawsze tej samej) a pozostale w pionie