div umschliest 2 divs und passt höhe nicht an

[Godstyle]

Moin leute,

ich möchte einen Div um 2 andere divs setzen deren Höhe abhängig von dem Text darin ist.

Derzeit sieht es so aus:

<div id="center">
<div id="top">&nbsp;
<div id="navi">&nbsp;</div>
<div id="base">&nbsp;</div>
</div>

<div id="mein"><!-- richtige position ändert die höhe aber nicht -->


<div id="left">Test<br>Test<br />Test<br />Test<br /></div>
<div id="base2">Test<br />Test<br />Test<br />Test<br />Test<br />Test
<div id="base_bottom">&nbsp;</div>
</div>
<div id="bottom">&nbsp;</div>
</div>
</div>

css:

#center {
	position:relative;
	top:20px;
	width:1000px;
	height:auto;
	margin-left:auto; 
	margin-right:auto;
	z-index:1;
}

#top {
	position:absolute;
	top:0px;
	background-image:url(top.gif);
	width:1000px;
	height:168px;
	z-index:1;
}

#navi {
	position:relative;
	top:60px;
	background-image:url(navi.gif);
	width:780px;
	height:30px;
	left:220px;
	z-index:2;
}

#mein {
	position:absolute;
	top:168px;
	background-image:url(main.gif);
	background-repeat:repeat-y;
	width:1000px;
	height:auto;
	z-index:1;
}
#base {
	position:absolute;
	top:138px;
	margin-bottom:20px; 
	left:220px;
	background-image:url(top_in.gif);
	height:30px;
	width:780px;
	z-index:2;
	
}

#left {
	position:absolute;
	top:0px;
	background-color:#92bcee;
	float:left;
	width:169px;
	margin-bottom:20px;
	height:auto;
	z-index:1;
}
#base2 {
	position:absolute;
	background-image:url(base.gif);
	background-repeat:repeat-y;
	left:220px;
	top:0px;
	width:780px;
	height:auto;
	z-index:1;
}

#base_bottom {
	position:absolute;
	background-image:url(bottom_in.gif);
	bottom:0px;
	width:780px;
	height:3px;
	z-index:2;
}
#bottom {
	position:absolute;
	background-image:url(bottom_out.gif);
	background-repeat:repeat-y;
	width:1000px;
	bottom:0px;
	height:auto;
	z-index:2;
}

sieht vlt ein wenig unübersichtlich aus aufgrund der vielen divs, nur eine andere Lösung sehe ich derzeit leider nicht um das zu realisieren.

lg

 

[franz007]

Hallo

Mit position: absolute nimmst du ein Element aus dem Textfluss. Daher wird auch der umschließende Div nicht entspechend größer.

http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position

 

[Godstyle]

Morgen,

mit relative ändert sich jedoch auch nichts.

lg

 

[Godstyle]

So update:

Ich habe mich natürlich weiter hier erkundigt und ähnliche beiträge gelsen, dabei bin ich auf einen gestoßen von Mike der ziemlich nah an meinem Problem liegt:

Lösung von Mike.

Habe dies nun bei mir eingebaut, jedoch muss ich dabei etwas falsch gemacht haben, sitze nun schon mehre Stunden daran und er möchte den mein div nicht um die beiden innen divs legen und seine höhe anpassen.

Hier noch mal die akutellen codes:

<div id="center" class="clearfix">
<div id="top">&nbsp;
<div id="navi">&nbsp;</div>
<div id="base">&nbsp;</div>
</div>

<div id="mein" class="clearfix">


<div id="left">Test<br>Test<br />Test<br />Test<br /></div>
<div id="base2">Test<br />Test<br />Test<br />Test<br />Test<br />Test
<div id="base_bottom">&nbsp;</div>
</div>

<div id="bottom">&nbsp;</div>
</div>

</div>

css:

        html
        {
            height: 100%;
        }

#center {
	position:relative;
	top:20px;
	width:1000px;
	height:auto;
	margin-left:auto; 
	margin-right:auto;
	z-index:1;
}
.clearfix:after {
content:".";
display:block;
height:0;
font-size:0;
clear:inherit;
visibility:hidden;
}

.clearfix {display: inline-block;}
 
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

#top {
	position:absolute;
	top:0px;
	background-image:url(top.gif);
	width:1000px;
	height:168px;
	z-index:1;
}

#navi {
	position:relative;
	top:60px;
	background-image:url(navi.gif);
	width:780px;
	height:30px;
	left:220px;
	z-index:2;
}

#mein {
	position:relative;
	top:168px;
	border:1px solid #000;
	background-image:url(main.gif);
	background-repeat:repeat-y;
	width:1000px;
height:auto !important;
height:200px;
	z-index:1;




}
#base {
	position:absolute;
	top:138px;
	margin-bottom:20px; 
	left:220px;
	background-image:url(top_in.gif);
	height:30px;
	width:780px;
	z-index:2;
	
}

#left {
	position:absolute;
	top:0px;
	background-color:#92bcee;
	float:left;
	width:169px;
	margin-bottom:20px;
	height:auto;
	z-index:1;
}
#base2 {
	position:absolute;
	background-image:url(base.gif);
	background-repeat:repeat-y;
	float:right;
	left:220px;
	top:0px;
	width:780px;
	height:auto;
	z-index:1;
}

#base_bottom {
	position:absolute;
	background-image:url(bottom_in.gif);
	bottom:0px;
	width:780px;
	height:3px;
	z-index:2;
}
#bottom {
	position:absolute;
	background-image:url(bottom_out.gif);
	background-repeat:repeat-y;
	width:1000px;
	bottom:0px;
	height:auto;
	z-index:2;
}

glg

 

[Masaku]

Position regelt die Ausrichtung eines Elements - nicht jedoch den Fluss. Das bedeutet, dass position:absolute bei #left und #base2 dafür sorgt, dass die beiden aus dem Fluss rausgenommen werden. Du musst diese beiden statisch positionieren bzw. das Attribut einfach löschen. Erst dann passt das Eltern-DIV die Höhe an.
Ich habs jetzt nicht getestet, aber ich vermute, dass auch dann die Höhe nicht angepasst wird. Und das liegt diesmal an den Float-Anweisungen. Um das zu lösen, musst du entweder #mein selbst ein FLoat geben oder (meist besser #base_bottom ein clear:both verpassen.
Wenn du sie absolut positioniert haben musst, dann bleibt dir, glaub ich, nichts anderes übrig, als #mein feste Maße zu geben.

Entfern die andere Lösung wieder. Die hat nicht wirklich was mit deinem Problem zu tun.