Boxen mit float, Reihen à 3 Spalten

[Detlef G.]

Hallo macangelo

.articlelistingbox {
float:left;
width:184px;
height:auto;
height:200px;
min-height:300px;
}

bei mir würde das wohl so aussehen:

  
.articlelistingbox {  
  float:left;  
  width:184px;  
  min-height:300px;  
}  

Dazu noch min-heigth für den IE, der height ignoriert, wenn der Inhalt zu
hoch ist.

  
* html .articlelistingbox {  
  height:300px;  
}  

Frage: die Boxen sind natürlich unterschiedlich hoch. Ich will einen sauberen "Zeilen"-Umbruch mit den Boxen, d.h. die 2. Reihe soll mit der Oberkante genau unter der höchsten Box der 1. Reihe stehen.

Du kannst jeweils drei Boxen gruppieren:

  
<div class="boxcontainer">  
  <div ...>Inhalt</div>  
  <div ...>Inhalt</div>  
  <div ...>Inhalt</div>  
</div>  
<div class="boxcontainer">  
  <div ...>Inhalt</div>  
  <div ...>Inhalt</div>  
  <div ...>Inhalt</div>  
</div>  

Dazu im CSS:

  
.boxcontainer {  
  clear:left;  
  float:left;  
  width:100%;  
}  

Dabei würde ich dann allerdings vereinfachen und den einzelnen Divs keine
Klasse geben sondern nur den .boxcontainern.
Im CSS sähe es dann so aus:

  
.boxcontainer div { /* statt .articlelistingbox */  
  float:left;  
  width:184px;  
  min-height:300px;  
}  
* html .boxcontainer div {  
  height:300px;  
}  

Auf Wiederlesen
Detlef