Height des 'container'-divs anpassen ?!

Computer: Software & Programmierung HTML & CSS
#1

hallo,

ich habe ein problem in css:

hier erstmal der code:
html-datei:

…

CSS-datei:

#container {
 position:relative;
 width:800px;
 height:auto;
}
#banner {
 position:absolute;
 top:0px;
 left:0px;
 width:800px;
 height:30px;
}
#navi {
 position:absolute;
 top:30px;
 left:0px;
 width:120px;
 height:auto;
}
#content {
 position:absolute;
 top:30px;
 left:120px;
 width:680px;
 height:auto;
}

so und jetzt ist mein problem, dass die div-container „banner“, „navi“ und „content“ sich absolut im div-container „container“ befinden und ich es nicht schaffe, dass die höhe des div-containers „container“ die höhe des höchsten kind-div-containers zugewiesen bekommt.

ich hoffe jemand kann mir helfen, probier schon 1 stunde damit herum.

danke und mit freundlichen grüßen
paul pröll

#2

Huhu! Soweit ich weiß geht das nicht. Woher soll der Hauptcontainer auch wissen, wie hoch das Kind ist?

Ich frage mich, was Du erreichen möchtest, vermute aber, dass Dein Problem das ist, dass durch die absolute Positionierung die Elemente ja aus dem Fluß herausgenommen werden, also nicht „wahrgenommen werden“ in ihrer Größe, der Hauptcontainer also praktisch so handelt, als wäre er leer.
Wenn es um ein Layout geht, würde ich mit Floats arbeiten und/oder Faux Colunns

Wenn Du weiterhin mit absoluter Positionierung arbeiten willst, bleibt Dir nix, als den Containern feste Höhen zu geben, da sie nicht Teil des Textflusses sind, also keinen „Raum“ einnehmen, an dem sich der hauptcontainer orientieren könnte… war das jetzt verständlich? Ich weiß nicht… :wink:

Gruß
Martha

#3

Hallo Paul,

ich habe ein problem in css:

ganz einfach: Martha sagte ja schon, dass Du die Elemente durch die absolute Positionierung aus dem Elementfluss nimmst. Durch Floaten erreichst Du die gleiche Positionierung, stellst den Elementfluss aber durch anschließendes Clearing wieder her.

...
 class="clearfix"\>



 position:absolute;
 top:0px;
 left:0px;
 width:800px;
 height:30px;
}
#navi {
 position:absolute;
 top:30px;
 left:0px;
 **float:left;**
 width:120px;
 height:auto;
}
#content {
 position:absolute;
 top:30px;
 left:120px;
 **float:right;**
 width:680px;
 height:auto;
}
  
**.clearfix:after {  
 content: ".";  
 display: block;  
 height: 0;  
 clear: both;  
 visibility: hidden;  
 font-size:0;  
}**  
_/\* es könnte auch anders gecleart werden, z.B. durch  
Zuweisung von float an das Eltern-Element \*/_

Gruß
Yasmin