Hallo,

ich habe ein Problem mit einem Layout bestehend aus div Containern. Ich habe einen linken und einen rechten Container. Der linke besteht wiederrum aus 3 untereinander liegenden Containern. der obere und der untere Container besitzen eine feste Höhe. der mittlere Container soll sich in der Höhe entsprechend dem rechten Container napssen. Im rechten Container soll sich der Inhalt befinden, dieser Container ist also in der Höhe variabel.

Ich bekomme es leider nicht hin, den mittleren Container im linken so zu definieren, das er seine Höhe ändert.

Ich bitte um Hilfe.

Ich habe diesem Beitrag einen Screenshot zur Veranschaulichung angehangen.

Hier noch mein HTML + CSS Code:

CSS Code:

HTML-Code:

<style type="text/css">
html, body {
	height:100%;
}
#main{
	width:604px;
	border:1px solid #000;
}
#left{
	width:100px;
	border:1px solid #000;
	float:left;
}
#oben{
	width:100px;
	height:213px;
	border:1px solid #000;
}
#mitte{
	width:100px;
	border:1px solid #000;
}
#unten{
	width:100px;
	height:297px;
	border:1px solid #000;
}
#content{
	float:left;
	width:498px;
	height:700px;
	border:2px solid #ff0000;
}
#footer{
	width:604px;
	height:30px;
	border:1px solid #000;
}
</style>

HTML Code:

HTML-Code:

<div id="main">

    <div id="left">
    
        <div id="oben">
        oben    
        </div>
        
        <div id="mitte">
        mitte    
        </div>
        
        <div id="unten">
        unten    
        </div>
    
    </div>
    
    <div id="content">
        Inhalt
    </div>
    
    <br style="clear:left" />

</div>

<div id="footer">Footer</div>

Hi,

mir ist da leider keine Möglichkeit bekannt, wie sich die Höhe von #mitte automatisch der Höhe von #content anpasst.

Zitat von Emu-Emsen

Im rechten Container soll sich der Inhalt befinden, dieser Container ist also in der Höhe variabel.

HTML-Code:

<style type="text/css">
#content{
	height:700px;
}
</style>

Der rechte hat doch eine feste höhe (700 px) oder ?

Die Höhenangabe diente hier wohl nur zu Testzwecken

Zitat von Maik

Die Höhenangabe diente hier wohl nur zu Testzwecken

So sah ich das auch, denn mein Code mit dem ich das ganze probiert hatte wurde ja gelöscht, aber zurecht!