Divs untereinander mit jeweiligen Border

[Sympatisant]

Hi,

Ich habe nun eine Liste gewaehlt.
Es sollen bis zu drei ListItems pro Zeile dargestellt werden.
Hierzu verwende ich fuer die LI-Elemente float:left und eine
definierte Breite (in %).
Nun ist es so, dass, gebe ich dem umliegenden UL eine Border,
die einzelnen LIs nicht innerhalb dieser visuellen Begrenzung
liegen.

  
<ul class="listContainer">  
 <li class="odd">BMW</li>  
 <li class="even">Alfa</li>  
 <li class="odd">Mercedes</li>  
 <li class="even">Audi</li>  
</ul>  

Ich habe bereits davon gehoert, dass man das Floaten mittels
clear:both wieder aufloesen muss.

Doch fuege ich zB folgende Zeile unter der Liste hinzu:

  
<div style="clear:both;"></div>  

so bekomme ich das selbe Ergebnis.

Packe ich es vor das schliessende UL-Element, so klappt
es zwar im FF, aber die Element-Referenz sagt ja eindeutig,
dass das so nicht erlaubt ist.

---

Des weiteren wuerde ich mal gerne erfahren, wie man drei
Elemente pro "Zeile" so anlegen kann, dass sie 100% der Breite
des sie umliegenden ULs einnehmen?
Arbeite ich mit 33% fuer die Breitenangabe, so fehlt natuerlich
das restliche 1% und zwischen der Border der UL und dem aeussersten
LI-Item ist eine kleine Luecke.

---

Verzeiht mir wenn ich so viele Fragen habe, doch so manches finde
ich derzeit einfach noch muehselig resp. unlogisch.

---

Code CSS

  
.listContainer {  
 border-width:1px;  
 border-style:solid;  
 margin:0px;  
 padding:0px;  
 float:none;  
 clear:both;  
}  
.listContainer li {  
 border-width:0px 1px 1px 0px;  
 border-style:solid;  
 margin:0px;  
 padding:0px 2px 0px 4px;  
 float:left;  
 height:45px;  
 width:32%;  
}  
  
.listContainer li.odd {  
 background-color:white;  
}  
.listContainer li.even {  
 background-color:#EFEFEF;  
}  

Vielen Dank & Gruesse,
Sympatisant