[CSS] 2 DIV Container mit gleicher Höhe - wie geht das?

[Lord_Sikon]

So,
ich hab folgende Frage:

Und zwar hab ein ein Layout mit Kopf- und Fußzeile und solchem Schnick - Schnack und der Hauptcontent besteht aus 2 DIV Containern. So und nun möchte ich gerne, wie es bei den guten alten Tabellen immer noch so war, dass das Menü, welches ja i.a.R. kleiner Ausfällt als die Contentspalte trotzdem die gleiche Höhe annimmt.

Ich hab beim googlen nur eine Javascript Lösung gefunden. Jedoch bin ich kein wirklicher Fan von JS, daher suche ich nach einer CSS Lösung.
Nachdem ich ein wenig experimentiert hab, kam ich auf die Idee die Menü- und die Contentspalte nochmals in einen gemeinsamen Container zu geben und dann sowohl der Menü-, als auch der Contentspalte die Höhe von 100% geben.

Dies funktioniert jedoch nur mangelhaft. Da sich ja die Höhe des Contents dynamisch ändert, soll sich auch die Höhe des "Umfassenden"-Containers ändern, um somit ebenfalls die Höhe der Navigation zu erhöhen.

Jedoch bekomm ich Navigation und Content nur auf eine gemeinsame Höhe, wenn ich die Höhe des "Umfassenden"-Containers auf eine fixe Größe setze, z.B. 600px.

Weiß jemand von euch Rat?

Hier einmal der Interessante Code:

[B][I](der wichtige) XHTML Code[/I][/B]
<div id="head">
		    	&nbsp;
		    </div>
		   		      
		    <div id="mainnavigation">
		    	<ul>
		    		<li>Punkt1</li>
		    		<li>Punkt2</li>
		    		<li>Punkt3</li>
		    		<li>Punkt4</li>
		    	</ul>
		    </div>	    
		    <div id="main">
		    <div id="navigation">
		    	Hier steht dann mal die Navigation
		    </div>
		    
		    <div id="content">
			    Und hier kommt dann viieeeeeeeeeeeeel Text rein<br />
			    und noch mehr<br />
			    viel mehr Text<br />und die Naviagtion wird hoffentlich auch größer!
		    </div>
		    </div>

Zur Erklärung der IDs
head : Kopfbereich der Webseite
mainnavigation : Hauptnaviagtion
main : Der "Umfassende"-Container
navigation : Die Navigation
content : Der eigentliche Webseiteninhalt


Und nun der (interessante) CSS Code:

#head {
    height: 100px;
    background-image: url(../images/banner.jpg);
    background-repeat: no-repeat;
    background-position: left;
    background-color: #001147;
}

#mainnavigation {
					background-color: #ff8400;
					height:22px;
					margin-top:1px;						
				}

#main { 
		
		display:block;
	  }
	  
#navigation {
	margin-top:1px;
	background-color: #ff8400;
    width: 20%;
    float: left;
    height:100%
}

#content {
	height:100%;
	margin-top:1px;	
	background-color:#e9ebef;    
    float:left;
    width:80%;
}

Schon einmal vielen Dank für eure Hilfe!

[derHund]

http://xhtmlforum.de/40267-css-haeuf...d-haeufig.html

[Lord_Sikon]

also irgendwie stehe ich da aufm Schlauch:

Ich habe wie beschrieben für das Elternelement (sprich den Container main) ein Hintergrundbild angelegt und es geht trotzdem nicht.

Der einzigste geänderte Code:

#main { 
		background: #ff8400 url(../images/content-bgfill.jpg) repeat-y 0% 0;
}

Nur das geht irgendwie nicht, ich hab auch schon Cache und alles geleert und rum probiert - Nichts!

[derHund]

Einzige! Geht nicht ist eine miese Fehlermeldung. Bei einem Zweispalter reicht es, eine Spalte zu floaten.

Wie auch immer du das machst, clearen mußt Du auf jeden Fall. Dein Float (beider Kinder) reißt beide ausm Fluß und zieht somit das Elternelement nicht mit auf - ergo siehst Du auch Dein Bild nicht.

[Lord_Sikon]

jo! Vielen Dank für die Tipps, denn jetzt funktionert der Code!