geschachtelter Div soll seine Höhe dynamisch an äußeren Div anpassen

[Flyingbaby]

Hallo Zusammen,

ich gestalte mir derzeit eine neue Website und arbeite nun das erste Mal mit Divs und PHP include.... Vorher habe ich mit reinem HTML auf Tabellen-Basis gearbeitet, sodass eine Änderung auf einer Seite immer in allen HTML Seiten aktualisiert werden musste.

Diesmal habe ich einen Div "Content" und in diesem geschachtelt mit float: left einen Div "Menü". Der umgebende "Content" beinhaltet das PHP include welcher Inhalt natürlich immer unterschiedlich lang ist. Der "Content" passt sich dieser Länge dynamisch an. Aber der innen liegende "Menü" wächst leider nicht mit... Das Menü hat ein background-images, dass sich auf der y-Achse von oben bis unten wiederholen soll. Darum fällt es natürlich auf, wenn dieser Div nicht mit wächst.

Das klingt jetzt kompliziert... ich hoffe, ihr versteht was ich meine.

Das ist das Format als CSS für die beiden Div-Container:

#menue {
	background-image:url(images/menue.png);
	background-position:right;
	background-repeat:repeat-y;
	width:228px;
	float:left;
	text-align:center;
	vertical-align:middle;
}

#content {
	margin-left:auto;
	margin-right:auto;
	background-image: linear-gradient(#f7fbfa 0%, #dec69e 100%);
	width:1000px;
	min-height:417px;
	border-radius:8px;
	padding-top:10px;
	padding-bottom:10px;
}

Dies ist die index.php für den Bereich:

<div id="content">
<div id="menue">
hier folgen die rollover buttons für das Menü
</div>
<?php include ("willkommen.html"); ?>
</div>

Ich habe schon einige Tage das Internet hoch und runter durchsucht. Dort wird immer wieder erwähnt, dass sich nur der äußere Div dem inneren in Höhe anpassen könne, aber wohl nicht anders herum... Ist das so richtig?

Außerdem hat jemand eine Lösung im Javascript gepostet... Damit kenne ich mich nun leider überhaupt nicht aus. Wenn also jemand eine Lösung hierfür nur im Java hat, dann bitte ich um eine Idotensichere Beschreibung, wo ich wie, was angeben muss...

Ich bedanke mich schon mal im Voraus für eure Geduld.

Vielen Dank******

 

[SpiceLab]

Any Column Longest - CSS Discuss hat dafür unterschiedliche (CSS-)Techniken im Angebot.

Edit:

Es gäbe hier im HTML-Code aber auch die alternative Technik der Verschachtelung zweier Elemente, um das (Menü-)Hintergrundbild der jeweiligen Inhaltshöhe anzugleichen ;-)

<div id="contentWrapper">
    <div id="content">
        ...
    </div><!-- end content -->
</div><!-- end contentWrapper -->

#menue {
	width:228px;
	float:left;
	text-align:center;
	vertical-align:middle;
}

#contentWrapper {
	margin-left:auto;
	margin-right:auto;
	background:linear-gradient(#f7fbfa 0%, #dec69e 100%);
	width:1000px;
	min-height:417px;
	border-radius:8px;
	padding-top:10px;
	padding-bottom:10px;
}

#content {
	background:url(images/menue.png) 223px 0 repeat-y;
	overflow:hidden;
}

 

[Flyingbaby]

WOW****** Super klasse******

Vielen, vielen Dank für die schnelle Lösung! Klappt astrein.