Boxhöhe in Abhängigkeit einer anderen Box ändern

[dwex]

Hallo Leute,

wieder mal quäle ich mich mit CSS und habe keine Ahnung was ich falsch mache.

Also ich bin gerade dabei eine Website zu basteln welche mit dem CSS-Boxmodell und Datenbank funktioniert - man kann sagen ich bastle ein Template für ein CMS.

So nun habe ich das früher immer mit Tabellen in HTML gemacht - das war ja schön einfach.

Ich habe nun mehrere Boxen gemacht und diese ineinander verschachtelt.
Das ganze sieht nun so aus:

<div id="hauptbox">

	<div id="menue">
	
	</div>
	
	<div id="bild1">
		<img src="<?php echo TEMPLATE_DIR; ?>/banner5-1.jpg" border="0" />
	</div>
	<div id="bild2">
		<img src="<?php echo TEMPLATE_DIR; ?>/banner5-3.jpg" border="0" />
	</div>
	<div id="bild3">
		<img src="<?php echo TEMPLATE_DIR; ?>/banner5-2.jpg" border="0" />
	</div>
	
</div>

Dazu habe ich folgendes CSS

body {
        font: 11px Verdana, Arial, Helvetica, sans-serif;
        background-color: #B2B2B2;
}


#hauptbox {
        position:absolute;
        top: 0px;
        left: 0px;
        width: 770px;
        background-color: white;
}

#bild1 {
        position:absolute;
        top: 0px;
        left: 0px;
        background-color: white;
}

#bild2 {
        position:absolute;
        top: 0px;
        left: 126px;
        background-color: white;
}

#bild3 {
        position:absolute;
        top: 62px;
        left: 0px;
        background-color: white;
}

#menue {
        position:absolute;
        top: 140px;
        left: 5px;
        width: 150px;
        height: 200px;
        background-color: black;
}

So es geht mir nun darum, dass die Box für das Menü (#menue) die Hauptbox (#hauptbox) in der Höhe ändern soll damit eben das Menü dynamisch generiert werden kann - das gleiche muss ich dann auch von für den hier noch nicht vorhandenen Contentbereich machen.

Leider passiert es bei mir (Firefox und IE7 - andere habe ich nicht) das die Menübox die Hauptbox NICHT in der Höhe ändert und dann eben über die Hauptbox hinaus angezeigt wird.

Was mache ich falsch?
Vielen Dank im voraus!

 

[josDesign]

Ich kann dir keine konkrete Hilfestellung geben aber was ich von michaelsinterface (der dir sicherlich antwortet ) gelernt habe ist, dass DIV Höhen nicht von einander abhängig gemacht werden können in der Höhe.

 

[Maik]

Der Grund für dieses Verhalten sind die absoluten Positionierungen der eingebetteten DIV-Boxen.

Probier es stattdessen mal auf diese Weise:

html,body {
         margin: 0;
         padding: 0;
}

body {
        font: 11px Verdana, Arial, Helvetica, sans-serif;
        background-color: #B2B2B2;
}

#hauptbox {
        width: 770px;
        background-color: white;
}

#bild1 {
        float: left;
        background-color: white;
}

#bild2 {
        margin-left: 126px;
        background-color: white;
}

#bild3 {
        clear: left;
        margin-top: 62px;
        background-color: white;
}

#menue {
        margin-top: 140px;
        margin-left: 5px;
        width: 150px;
        min-height: 200px;
        height: auto !important;
        height: 200px;
        background-color: black;
}

<div id="hauptbox">
        <div id="bild1"><img src="<?php echo TEMPLATE_DIR; ?>/banner5-1.jpg" border="0" /></div>
        <div id="bild2"><img src="<?php echo TEMPLATE_DIR; ?>/banner5-3.jpg" border="0" /></div>
        <div id="bild3"><img src="<?php echo TEMPLATE_DIR; ?>/banner5-2.jpg" border="0" /></div>

        <div id="menue">menue</div>
</div>

Anmerkung: die margin-Werte müssen ggfs. noch angepasst werden, da sie den Außenabstand zum benachbarten Element definieren und daher nicht mit den absoluten Positionsangaben übereinstimmen.

@josDesign: Da hast du mich wohl mißverstanden, denn dies gilt für benachbarte DIVs. Ein eingebettetes DIV kann sehr wohl die Höhe des übergeordneten DIVs beeinflussen, wenn es eben darin nicht fest positioniert ist.

 

[josDesign]

@michi: aha, danke!!