Klaus: 2 DIV nebeneinander mit gleicher Höhe

Hallo,

ich möchte gerne 2 nebeneinander stehende DIVs so definieren, dass beide immer dieselbe Höhe haben.
Der Inhalt ergibt sich erst beim Laden der Seite und kann mal im ersten DIV und mal im zweiten DIV länger werden.
Wie stelle ich das am geschicktesten an?

Wenn ich einen weiteren DIV-Container um diese beiden DIV herumsetze und den beiden DIVs als Höhe 100% mitzugebe, dann passiert erstmal nichts. Wenn ich dem Container eine feste Höhe gebe, dann haben beide automatisch diese feste Höhe auch.

Zum Spielen habe ich mal einen JSFiddle gespeichert: Hier gehts zum Fiddle

Im Beispiel ist zu sehen, dass die rechte Seite nicht "mitgewachsen" ist.

  1. Om nah hoo pez nyeetz, Klaus!

    ich möchte gerne 2 nebeneinander stehende DIVs so definieren, dass beide immer dieselbe Höhe haben.

    Gegebenfalls gibt es sinnvollere Elemente. Entscheidungshilfe.

    Für aktuelle Browser gibt es flexbox, Unterstützung wird besser.

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Mink und Minkowski-Diagramm.

  2. @@Klaus:

    nuqneH

    ich möchte gerne 2 nebeneinander stehende DIVs so definieren, dass beide immer dieselbe Höhe haben.
    Der Inhalt ergibt sich erst beim Laden der Seite und kann mal im ersten DIV und mal im zweiten DIV länger werden.
    Wie stelle ich das am geschicktesten an?

    display: table-cell oder flexbox.

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. display: table-cell oder flexbox.

      Hallo und vielen Dank.
      Ich habe mir zuerst flexbox angeschaut, aber aufgrund der doch noch nicht so breiten Unterstützung bei den Browsern beiseite geschoben.

      Letzlich hat table-cell geholfen, auch wenn ich ein paar DIVs reicher wurde (damit display:table; und display:table-row; dabei waren)

      Vielen Dank für den Tip.

      Klaus

      1. @@Klaus:

        nuqneH

        Letzlich hat table-cell geholfen, auch wenn ich ein paar DIVs reicher wurde (damit display:table; und display:table-row; dabei waren)

        Nein, die div brauchst du nicht; die Boxen dafür werden implizit generiert.

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        1. @@Klaus:

          nuqneH

          Letzlich hat table-cell geholfen, auch wenn ich ein paar DIVs reicher wurde (damit display:table; und display:table-row; dabei waren)

          Nein, die div brauchst du nicht; die Boxen dafür werden implizit generiert.

          Qapla'

          Ohne das DIV mit dem display:table-row hatte sich nichts geändert, ohne display:table wurde die gewünschte Breite halbiert. Mit den DIVs drumrum wird jetzt alles sauber dargestellt.
          Denke, dass es durchaus auch Sinn macht, sonst gäbe es doch auch nur table-row.

          Nochmals danke für die Hilfe.

  3. Hi,

    ich möchte gerne 2 nebeneinander stehende DIVs so definieren, dass beide immer dieselbe Höhe haben.

    Wie stelle ich das am geschicktesten an?

    Du betreibst ein wenig *Recherche* zu diesem bereits unendlich oft diskutierten Thema, mit Suchbegriffen wie „faux columns”, „equal height columns” und dergleichen.

    MfG ChrisB

    --
    Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/