equal height boxes mit display: table/ inline-table

[Gunther]

Hallo werte Selfgemeinde!

Ich suche nach einer "Lösung" für folgende Aufgabenstellung:
Es gibt jeweils ein umschließendes Element, welches wiederum jeweils 2 andere Elemente beinhaltet. Diese haben eine variable Höhe.

Ziel ist es, dass diese beiden Boxen jeweils dieselbe Höhe haben, abhängig vom Inhalt (also bei variabler Höhe).

Zum besseren Verständnis hier das zugehörige jsFiddle.

Das ist als Alternative für Browser gedacht, die keine der Flexbox Syntaxen unterstützen, dafür aber display: table/ inline-table oder andere CSS Eigenschaften - also primär der IE 8.

Leider "versagt" mein derzeitiger Ansatz in allen IE Versionen (abgesehen davon, dass jsFiddle nur noch IE 9+ unterstützt) ...! Ebenso "scheitert" der Ansatz in Opera. Beide Browser dehnen die inneren Boxen nicht auf 100% der Höhe des umschließenden Elements aus.

In FF, CHrome und Safari hingegen funktioniert es wie gewünscht.

Frage: Hat jemand einen Tipp/ eine Idee, wie dieses Ziel auch für IE 8+ und Opera zu erreichen ist, *ohne* Javascript?

Gruß Gunther

[Gunther]

Hallo werte Selfgemeinde!

Ich nochmal ..., wie üblich habe ich natürlich etwas vergessen.

Natürlich wäre die "einfachste", bzw. naheliegendste Variante die, einfach display:table; und display:table-cell; zu verwenden.

Es geht mir aber darum, dass die beiden inneren Boxen einen Abstand/ Zwischenraum haben.
Und das kriege ich mit der o.g. Methode nicht hin. Genauer gesagt nicht "schön" hin. Denn um bei dieser Variante einen Zwischenraum zu erhalten, bleibt einem nur 'border-spacing' für das 'table' Element, was dann aber wiederum den unschönen Effekt hat, dass dieser Space auch jeweils vor und hinter jedem der 'table-cell' Elemente vorhanden ist.

Und auch dafür habe ich zumindest bis jetzt keine "vernünftige" Lösung gefunden ...!
So "Spielereien" wie mit negativen Margins etc. führen alle zu "unerwünschten Nebeneffekten".

Auch würde ich nur äußerst ungern das Markup weiter "aufblähen", um so Geschichten wie
.inner:first-child {border-right: 20px solid transparent;}
zu verwenden.

Gruß Gunther

[ChrisB]

Hi,

Auch würde ich nur äußerst ungern das Markup weiter "aufblähen", um so Geschichten wie
.inner:first-child {border-right: 20px solid transparent;}
zu verwenden.

In wie fern bläht das das Markup auf?

MfG ChrisB

[Gunther]

Hi,

Auch würde ich nur äußerst ungern das Markup weiter "aufblähen", um so Geschichten wie
.inner:first-child {border-right: 20px solid transparent;}
zu verwenden.

In wie fern bläht das das Markup auf?

weil du dann für die "eigentliche" border noch ein zusätzliches (Container) Element brauchst ...! ;-)

Gruß Gunther