Div an größe des inneren Divs anpassen

Godstyle

Erfahrenes Mitglied
Hallo liebe Gemeinde,

ich habe ein kleines Problem mit der anpssung meines div Containers.

Zunächst einmal die beiden scripte die Ihr benötigt um mein Problem nachvollziehen zu können:

Php Script mit dem Design:

PHP:
<body bgcolor="#F0F0F0">
<div id="center">
<div id="top">&nbsp;</div>
<div id="left">&nbsp;<br />Home<br />
Community<br />
Shopping<br />
Reisen<br />&nbsp;</div>



<div id="mein">

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

<div id="base2">test</div>
<div id="base_bottom">&nbsp;</div>
</div>

<div id="bottom">
<?php require_once('../main/footer.php'); ?>
</div>







</div> <!--main ende -->

</div>
</body>


Habe hierzu alle weiteren Inhalte ausgeblendet, da ich diese auch beim Testen nicht nutze.

Nun zu dem css Bereich:

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

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

#top {
	position:absolute;
	top:0px;
	left:200px;
	background-image:url(top.gif);
	background-repeat:no-repeat;
	width:1000px;
	height:167px;
	z-index:1;
}
#mein {
	position:relative;
	top:48px;
	background-image:url(main.gif);
	background-repeat:repeat-y;	
	float:left;
	width:1000px;
	height:auto;
	z-index:1;
}

#left {
	position:absolute;
	top:0px;
	padding-top:130px;
	padding-left:20px;
	background-color:#B8C8DC;
	width:150px;
	height:auto;
	z-index:2;
}

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

#base2 {
	position:relative;
	background-image:url(base.gif);
	background-repeat:repeat-y;
	float:left;
	top:60px;
	left:200px;
	width:780px;
	height:auto;
	min-height:300px;
	z-index:1;
}

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

ein screen ist angehangen oder unter:
http://verino.cwsurf.de/v2/test.php
abzurufen.

So nun das Problem ist eindeutig zu erkennen, der äußere Div umschliest den inneren, der Dynamisch in der Höhe vom Inhalt angepasst wird nicht richtig.

Mir ist bewusst das ich durch float:left; im mein Div mich an der navi anpasse, dies ist nicht unbedingt gewollt und war nur ein versuch.

Ich komme an dieser Stelle nicht wirklich weiter da ich nicht genau weiß wie ich die Sache angehen muss um dort zu einem Richtigen ergebniss zu kommen.

Ich wäre ser dankbar für eine Lösung inkl. erklärung weshalb um es zukünftig zu verstehen.

lg godstyle
 

Anhänge

  • test.jpg
    test.jpg
    8,8 KB · Aufrufe: 31
Zurück