Boxen mit float, Reihen à 3 Spalten

[macangelo]

Hi

Aus MySQL werden Inhalte bereitgestellt, 3, 7, 20 Beiträge - je nach dem. Ich will diese in jeweils 3 Blöcken nebeneinander darstellen. Der 4.-6. Block geht dann in die 2. Reihe Blöcke usw.. Ich habe die Boxen mit <div artikelbox>...</div>  und
.articlelistingbox {
float:left;
width:184px;
height:auto;
height:200px;
min-height:300px;
}
definiert.

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. Wie geht das (die Lösung oben funktioniert nicht. IE akzeptiert nicht einmal die min-height)

Herzlichen Dank

[RFZ]

height:auto;
height:200px;
min-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. Wie geht das (die Lösung oben funktioniert nicht. IE akzeptiert nicht einmal die min-height)

Moin,
das geht meines Wissens nur, wenn du allen Boxen eine fest definierte Höhe zuweist, von der sie dann auch nicht abweichen dürfen (also min-height und auto rauswerfen), was aber problematisch ist, wenn der Inhalt dynamisch ist.
Daher rate ich dir, auch wenn man dir sicher anderes eingetrichtert hat, zu Tabellen.

greetz RFZ

[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

[macangelo]

Hi RFZ
H Detlef G.

Danke für Eure Hilfe.

Die Reduzierung, der ich in diesem Fall unterworfen ist ist noch eine spezielle. Das CMS ist modular aufgebaut. D.h. das Template, das ich gerade bearbeite, formatiert nur einen Beitrag. So kann ich hier z.B. gar keine ganze Tabelle formatieren sondern nur eine Zelle. Und daher kann ich auch die klasse Idee mit dem Klammern mit <div> nicht nutzen.

Mein Template (mit Inhalt) wird dann hinterher solange wiederholt, wie es Inhalte gibt.

Ich habe mir jetzt so geholfen, dass ich in dem Template eine feste Höhe bestimmt habe. So habe ich zwar keine dynamische Höhe und auch Platz verschwendet (bei nicht so hohen Elementen) aber keine Überlappungen und IE zickt nicht mehr.

Herzlichen Dank noch mal

macangelo