Zwei DIV-Boxen nebeneinander mit gleicher aber variabler Höhe

Status
Nicht offen für weitere Antworten.

Shen84

Grünschnabel
Hallo,
irgendwie komme ich nicht weiter und wollte mal fragen, ob jemand hier einen Tipp für mich hat:

Ich habe zwei umrahmte DIV-Boxen mit Inhalt über float nebeneinander gesetzt und mit einem DIV umgeben.
Beide Boxen enthalten einen verschieden langen Text, was zur Folge hat, dass die Rahmen vertikal unterschiedlich lang sind. Die Boxen sollen aber genau gleich groß sein und sich am umgebenden Rahmen orientieren. Es funktioniert mit min-height in #startseite_rahmen_dotted, aber das ist eine unschöne Lösung wenn in den Boxen zu wenig Inhalt ist, weil dann ein viel zu großer leerer Rahmen angezeigt wird.

Hier der HTML-Code:
HTML:
<div id = \"startseite_rahmen\">
    <div id = \"startseite_gesuche\">
        <div id=\"startseite_rahmen_dotted\">
            Inhalt 1 - variable Größe
        </div>
    </div>
    <div id = \"startseite_eintraege\">
        <div id=\"startseite_rahmen_dotted\">
            Inhalt 2 - variable Größe
        </div>
    </div>
</div>

Und hier der CSS-Teil
HTML:
#startseite_rahmen {padding: 1px;}
#startseite_gesuche {width: 50%; float: right; min-height: 100%;}
#startseite_eintraege {width: 50%; min-height: 100%;}
#startseite_rahmen_dotted {border-style:dotted; border-width:thin; padding: 10px; margin: 3px;}

Hat jemand einen Tipp für mich, wie ich die innere Boxenhöhe an den Rahmen binde?
 
Hi,

AnyColumnLongest listet CSS-Techniken für mehrspaltige Layouts auf, in denen die Spaltenblöcke unabhängig von ihrem Inhalt ihre Höhen automatisch angleichen.

mfg Maik
 
Status
Nicht offen für weitere Antworten.
Zurück