2 DIV nebeneinander mit gleicher Höhe

[Klaus]

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.

[Matthias Apsel]

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

[Gunnar Bittersmann]

@@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'

[Klaus]

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

[Gunnar Bittersmann]

@@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'

[Klaus]

@@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.

[ChrisB]

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