✔ Zwei Divs auf selbe Höhe bringen...

[SonMiko]

Hallo liebe Leute -

ich versuche nun verzweifelt zwei nebeneinanderliegende Divs auf eine Höhe zu bekommen.
Der Linke enthält eine Navigation, der Rechte ist der Contentbereich.
Sieht folgendermaßen aus:

<div id="mainnavi"></div>
<div id="detaillnavi"></div>
<div id="content"></div>
<div id="bottom"></div>

Ausschlaggebend sind "detaillnavi" und "content".
Die CSS sieht folgendermaßen aus:

#top {
	background-image:url(../images/top.png);
	width:819px;
	height:150px;
}
#mainnavi {
	background-image:url(../images/mainnavi.png);
	width:819px;
	height:61px;
}
#detaillnavi {
	background-image:url(../images/detaillnavi.jpg);
	background-repeat: repeat-y;
	width:181px;
	height:300px;
	float:left;
}
#content {
	background-image:url(../images/content.jpg);
	background-repeat: repeat-y;
	width:638px;
	height:auto;
	float:left;
}
#bottom {
	clear:both;
	background-image:url(../images/bottom.png);
	width:819px;
	height:67px;
}

Wie man sieht steht der Wert von Content auf "auto".
Hier fügt das CMS automatisch die Inhalte ein, und der DIV-Container passt sich der Größe/ Menge der Texte an. Dummerweise fehlt die Kommunikation zwischen dem links daneben liegenden DIV-Container welcher ja die Werte des rechten nicht mitbekommt.
Ich habe auch diesen schon auf Auto gesetzt, leider bleibt er dann einfach ganz klein...

Ziel ist es also beide Container in die selbe größe ("height") zu kriegen.

Kann mir jemand von euch CSS-Gurus helfen?

Besten Dank und liebe Grüße,

Euer

Mike

 

[Maik]

Hi,

in dem Artikel AnyColumnLongest findest du Links zu diversen Techniken für solche "Equal-Height-Columns".

Die bekannteste Methode bei Verwendung von Hintergrundbildern in einem Layout mit fixen Breiten ist die "Faux Columns"-Technik.

 

[SonMiko]

...ach klar - liegen ja nebeneinander, also ein Bild...
Dankeschön Scheint bestens zu klappen.