ich_brauche_hilfe: verschachtelte floating divs

Beitrag lesen

Hallo!

Ich habe ein großes Problem beim Erstellen eines dreispaltigen Layouts mit einem div als rahmen, der dann wiederum drei divs enthält. nicht immer sind es 3, diese sollen dann aber weiter formatiert sein (best. breite) und ihre postion halten, egal ob die äußeren boxen beide/einzeln da sind oder nicht (deshalb:float).

dazu verwende ich folgende css:

#area {
 border: 2px solid red;
}

#floatleft {
float:left;
border:1px solid black;
}

#floatright {
float:right;
border:1px solid black;
}

nun verstehe ich aber folgendes nicht: warum ist das umgebende area-div 0px hoch, sobald auch nur ein div drinnen ist, welches "floatet"?

also:

<div id="area">
   <div id="floatleft">LINKS</div>
</div>

somit wird das float-div UNTERHALB einer roten linie (dem eigentlichen container-div ohne fixe höhe) dagestellt. das ist doch völlig unlogisch ... hab ich hier einen fehler gemacht?

zweitens, und das beschäftigt mich viel eher - wieso funktioniert mein code nicht? bei folgendem beispiel wird das rechte div (sowohl IE als auch FF ...) immer rechts UNTERHALB der anderen divs dargestellt, also quasi außerhalb des area-divs, welches aber nun das linke und das text-div umfasst.

<div id="area">
   <div id="floatleft">LINKS</div>
   <div>TEXT</div>
   <div id="floatright">RECHTS</div>
</div>

es wäre toll, wenn mir jemand dieses für mich noch mysteriöse verhalten erklären könnte ... hab nun 1,5 stunden herumgelesen und herumprobiert und wage es nun einmal, hier um rat zu fragen ....

bestn dank im voraus!