2 div boxen mit gleicher Höhe

[katoc]

Hallo liebe Community,
nun quäle ich mich schon ein paar Tage mit folgendem Problem:
Ich habe 2 css-container, wovon einer 40%, der andere 60% des Browserfensters in der Breite einnimmt.
Ich möchte, dass beide Container in der Höhe immer gleich sind und sich die Höhe des niedrigeren Containers der Höhe des höheren Containers anpasst. (je nachdem welcher Container mehr Inhalt hat)

Ich habe eine testdatei mal hochgeladen zum gucken:
TEST SEITE

Ich habe alles mögliche schon versucht: mit 100% Höhe der divs - aber geht der INhalt des Containers über 100% (Browserfensterhöhe) hinaus, läuft der Inhalt über das div hinaus.

Zu den Tabellen in den divs: egal ob Tabelle oder einfacher Text in den divs steht, der Effekt ist immer der gleiche.

Vielleicht hat ja jemand eine Idee, ich bin leider etwas ratlos im Moment
Vielen Dank

katoc

 

[Efchen]

Das ist nicht möglich, da sich die Block-Elemente immer der Menge ihres Inhalts anpassen und keine Beziehung zwischen den beiden Elementen besteht. Mit display:table-cell könnte das funktionieren, das kann aber nicht jeder Browser.

Man behilft sich dabei mit Faux Columns, wo man mit einer geeigneten Hintergrundgrafik so tut, als wären die Elemente gleich hoch.
A List Apart: Articles: Faux Columns

Gruß,
-Efchen

 

[katoc]

Das ist nicht möglich, da sich die Block-Elemente immer der Menge ihres Inhalts anpassen und keine Beziehung zwischen den beiden Elementen besteht. Mit display:table-cell könnte das funktionieren, das kann aber nicht jeder Browser.

Man behilft sich dabei mit Faux Columns, wo man mit einer geeigneten Hintergrundgrafik so tut, als wären die Elemente gleich hoch.
A List Apart: Articles: Faux Columns

Gruß,
-Efchen

@Efchen
Vielen Dank für die schnelle Antwort, ist nicht schlecht für feste Breiten der div container, aber ich habe ja prozentuale Breitenwerte.
Vielleicht fällt dir dazu ja was ein!?
Gruss katoc

 

[Efchen]

Design abändern?

 

[prm]

Geht auch für prozentuale Breiten, wenn man eine "Maximalbreite" unterstellt:
Faux Columns bei flüssigem Layout

Allerdings bringen solche flüssigen Layouts auch Nachteile mit sich:
Je nach Viewport-Breite kann ein Bereich mit 60 % Breite ziemlich ausgedehnt wirken. Wenn da nur Text drin ist, werden die Textzeilen ziemlich lang, was erhöhte Lesekonzentration erfordert.
Seit die Vielzahl der Bildschirmgrößen zugenommen hat, tendiere ich mehr zu einem fixen Layout mit so ca. 900px bis 950px Breite. Da ist die Darstellung für den Webmaster "kalkulierbar" und die Seite sollte überall gleich aussehen (vom evtl. erforderlichen Scrollen mal abgesehen).

 

[katoc]

@prm
@Efchen

Danke für die schnelle Hilfe!!!!!
Also, liquid faux colum ist für mich die Lösung.
Habees in allen Browsen getestet und bleibt immer richtig.

Hier noch nen Link zur einer guten ausführlichen Seite zu dem "liquid faux colum" Problem. Creating Liquid Faux Columns

Schönen Tag noch
katoc