[CSS]Float left granica szerokosci Opcje

[swiru_]

Witam,

ciezko o tytul do problemu ale mysle ze choc troche trafny.

Problem:

[HTML] pobierz, plaintext 
 
<div class='right-content'>
 <ul>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
</ul>
</div>
 
[HTML] pobierz, plaintext 

CSS:

[HTML] pobierz, plaintext 
 
.right-content {
 float: left;
 width: 808px;
}
 
.right-content ul li {
 float: left;
 width: 199px;
 height: 70px;
 margin-right: 4px;
 margin-bottom: 4px;
}
 
[HTML] pobierz, plaintext 

Chodzi o to ze elemnt <li> ma taka szerokosc zeby zmiescily sie 4 w rzedzie, kolejny powinien pojawiac sie pod spodem jako nowy rzad. Niestety przez to ze jest zadany margin-right 4px to zlamanie nastepuje juz po 3 obiekcie. Wazne jest to ze szerokosc nie moze byc inna poniewaz ostani <li> w rzedzie (4) krawedz prostokata konczy sie z krawedzia prostokata elementu ktory jest nad .right-content wiec aby wizualnie wszystko dobrze wygladalo musi byc taka szerokosc...

Mam nadzieje ze dosc zrocumiale to opisalem (IMG:style_emoticons/default/smile.gif)

Z gory dzieki za pomoc.

Pozdrawiam M.

[swiru_]

(IMG:style_emoticons/default/smile.gif)

Jasne ze nie scisniecie (IMG:style_emoticons/default/smile.gif)

Czego oczekuje?

wiem ze css moze odnosic sie do n-tych dzieci danego selektora, ale na pewno nie dziala to poprawnie w IE, wiem ze moge bawic sie :first i :last, ale problem jest taki ze w kolejnych rzedach <li> juz nie jest first tylko five, ten itd.

Czy jest jakis zloty sposob na ulozenie obiektow tak, zeby ustawialy sie w rownych rzedach i kolumnach z rownymi odstepami w srodkowych obiektach bez nadawania marginesow dla pierwszego i ostatniego obiektu w rzedzie?

Jesli dam margin-left, to pierwszy bloczek odstawi sie o 4px dalej niz powinien, a jego pozycja tez jest okreslona przez obiekto ktory znajduje sie nad .content-right