verschachtelte floating divs

[ich_brauche_hilfe]

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!

[ChrisB]

Hi,

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

Weil float ein Element aus dem Fluss nimmt, so dass es die Hoehe seiner Vorfahrenelemente nicht mehr beeinflusst.

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.

Weil du es als letztes Element im Quellcode stehen hast.
Wenn du das so machen willst, dann musst du das Element vor das Element setzen, welches in die Mitte kommen soll.

Du kannst aber auch die ersten beiden Elemente nach links floaten, und das dritte sich dann den verbleibenden Platz daneben nehmen lassen.

Schau dir das mal in Ruhe an: Grundlagen für Spaltenlayout mit CSS

MfG ChrisB

[ich_brauche_hilfe]

Weil float ein Element aus dem Fluss nimmt, so dass es die Hoehe seiner Vorfahrenelemente nicht mehr beeinflusst.

danke für die erklärung ... unlogisches verhalten .)

Weil du es als letztes Element im Quellcode stehen hast.
Wenn du das so machen willst, dann musst du das Element vor das Element setzen, welches in die Mitte kommen soll.

oho! danke für diesen wichtigen ratschlag!

Schau dir das mal in Ruhe an: Grundlagen für Spaltenlayout mit CSS

das ist ein toller link - leider bin ich nicht eher draufgestoßen ...

hab es jetzt so gelöst, dass die mittlere spalte ein margin-left bekommt oder auch ein margin-right. je nachdem, ob die rechten und linken spalten vorhanden sind oder nicht, wird für die immer vorhandene mittlere spalte (content) die formatierung angepasst .)

[Tunnel85]

Hi, kann deinem Vorhaben nicht ganz folgen! Die Bereiche links und rechts sollen auch vorhanden sein, wenn sie nicht vorhanden sind??? Wie kann denn das mitllere seine Position halten, wenn das linke nicht da ist?

Zu dem was ich jetzt aus deinem Text lese, probier mal dem mittlerem div ein float:left zugeben und nach allen gefloateten divs, mach mal ein clear:both.

Vieleicht ist das ja schon was Du suchst.

Ansonsten erläutere bitte nochmal dein Vorhaben.

Gruß
Tunnel85

[at]

Hallo.

Wie kann denn das mitllere seine Position halten, wenn das linke nicht da ist?

Mittels seines Aussenabstandes.
MfG, at