Sebastian M.: 4 DIVs mit gleicher Höhe

Hallo,

ich ärgere mich zur Zeit mit DIV-Blöcken herum. Folgendes Problem:

Ich möchte auf meiner Seite vier DIV-Blöcke nebeneinander haben.
Soweit kein Problem. Alle vier DIV-Blöcke sollen jeweils die gleiche
Breite und Höhe haben. Mit width und height auch kein Problem.

Nun wird der Inhalt der vier DIV-Blöcke aber dynamisch generiert (je
ein Bild mit darunter einer Zeile Text). Die Bilder sind alle gleich
breit, aber unterschiedlich hoch. Das heißt, ich weiß nie, wie hoch
der Inhalt der einzelnen DIVs nun wird. Die height-Angabe fällt also
raus.

Wie bekomme ich es nun hin, das trotzdem alle DIVs die gleiche Höhe
haben? Früher hätte ich das mit einer Tabelle realisiert, aber
da es hierbei nicht um tabellarische Daten geht, wollte ich das gerne
mit CSS lösen.

Hat da jemand eine Idee?

Viele Grüße,
Sebastian

  1. Hi,

    Wie bekomme ich es nun hin, das trotzdem alle DIVs die gleiche Höhe
    haben?

    mit display:table-cell.

    Früher hätte ich das mit einer Tabelle realisiert, aber
    da es hierbei nicht um tabellarische Daten geht, wollte ich das gerne
    mit CSS lösen.

    Ja. Da Du jedoch eine tabellenähnliche Darstellung haben möchtest, sind die table-Typen das Mittel der Wahl.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Wie bekomme ich es nun hin, das trotzdem alle DIVs die gleiche Höhe haben?

      mit display:table-cell.

      Vielen Dank für den Tipp. table-cell habe ich noch nie benutzt, da wäre
      ich wohl von alleine nicht drauf gekommen. Funktioniert jedenfalls bestens.

      Viele Grüße,
      Sebastian

    2. Ja. Da Du jedoch eine tabellenähnliche Darstellung haben möchtest, sind die table-Typen das Mittel der Wahl.

      Hallo nochmal,

      leider sind die table-Typen wohl doch nicht das Mittel der Wahl. Wie
      ich jetzt feststellen musste, funktioniert das ganze leider (mal
      wieder) nicht im Internet Explorer. Hatte bisher nämlich nur im
      Firefox getestet.

      Hast du noch eine andere Idee? Sonst werde ich wohl doch wieder
      <table> nehmen müssen.

      Viele Grüße,
      Sebastian