CSS Problem mit Container-Höhe

[themetimer]

Es ist mir ja fast schon peinlich, aber stehe gerade echt im Wald und bin gedanklich irgendwie festgenagelt.
Ich habe das folgende CSS-Konstrukt:

(Für's Beispiel habe ich mich auf die entscheidenden Werte beschränkt)

#rechterkasten {
width: 20%;
float: right;
margin: 0% 5%;
border: 1px solid #000;
}

#linkerkasten {
width: 70%;
margin: 0;
border: 1px solid #000;
}

In HTML sieht das ganze dann wie folgt aus:

<div id="rechterkasten">
<!-- Inhalt Rechts -->
</div>
<div id="linkerkasten">
<!-- Inhalt Links -->
</div>

Jetzt mein Problem:

Der "Inhalt Rechts" enthält eine Navigation, die immer gleich aussieht und somit den rechten Container auf eine gewisse Höhe streckt.
Der linke Inhalt ist jedoch sehr unterschiedlich, manchmal sind es nur zwei Zeilen, manchmal ein halber Roman.
Ich hätte gerne, dass der Container links mindestens die Höhe des rechten Containers animmt, damit die beiden "Freunde" bündig abschließen, auch wenn der Inhalt des linken Containers beschränkt ist.

Da das ganze vermutlich relativ quer erklärt ist, hier mal eine Grafik, die meinen Wunsch erläutern soll :

Der Bereich unter "wenig Text" soll also leer sein, dennoch soll sich der Container auf die Länge des rechten Containers erstrecken.
Ich kann den linken Container natürlich nicht mit einer fixen Höhenangabe belegen, da die Inhalte über ihn weggehen würden, sobald es viel Inhalt gibt.

 

[Bullabeisser]

...und warum machst Du keine Höhenangaben rein? Stichwort "height"

Sorry - fixe Höhe nicht möglich hab ich glatt überlesen.

 

[QuHno]

Weil "height" leider nicht überall sauber funktioniert ("min-height" wäre schöner, funbktioniert aber auch nicht überall sauber) und weil das Layout wahrscheinlich flexibel bleiben soll, wie ich vermute, sprich: Sobald "rechts" länger wird als "links" soll der ganze Kram wachsen können
Grid Based Layout wird wohl erst mit der nächsten CSS Version möglich sein, so lange geht es leider nur mit einem Workaround.

Ich nehme jetzt einfach einmal an, dass das, was Du da gezeigt hast, im Prinzip ein 2-spaltiges Seitenlayout darstellen soll.

Im Prinzip müsstest Du dann die Konstruktion so bauen:

<div id="rechts">
<div id="links" style="float:right;">Navi oder so</div>
Inhaltskram
</div>

Für die runden Ränder und die Hinterlegungen wären allerdings ein paar andere Hilfskonstruktionen fällig, z.B. ähnliche, wie ich sie bei diesem Test verwendet habe, da einmal speziell auf die

<b class="abc" id="xyz"> </b>

Elemente achten ...

Was ich da gemacht habe, funktioniert prinzipiell auch bei 2 "Spalten"

 

[themetimer]

Nunja, danke erst einmal für eure Tipps... leider ist der Gesamtbau der Seite doch etwas komplexer... und ich kann "float" nicht einfach vom rechten Container auf den linken übertragen :mad.

Ich habe jetzt das Problem mit einer sehr unsauberen Methode gelöst. Ich habe eine Klasse erstelle, die den Namen empty trägt und ohne Inhalt ein height: 600px; trägt