Ingo Turski: gefloatete Boxen clearen und dann gleichlang?

Beitrag lesen

Hi,

das Clearen hab ich - auch nach Genuss von Ingos Beschreibung
nicht mal ansatzweise begriffen ;-(

mach' Dir nichts draus. Kein einziger Browserhersteller hat die Specs bisher vollständig verstanden bzw. umgesetzt. ;-)

Alles was ich zu Clearing gelesen
hatte, hiess immer "am Ende eines floatenden Elementes" muss man clearen.
Oder am Ende des letzten floatenden. Kurzum, mit meinem Verstaendis
stimmt da was nicht ;-(

Ich versuche mich mal in ASCII-Art...

|--------------------Container--------------------|
|Überschrift {float:none}                         |
||-----------------|------------------------------|
||Menü {float:left}| Inhalt {float:none}          |
||-----------------|-Container Ende---------------|
 |Menü             |
 |Menü             |
 |----Menü Ende----|

Das Menü ist aus dem Textfluß genommen und beeinflußt damit nicht mehr die Höhe des umschließenden Containers. Berücksichtigt wird nur die Höhe der nichtfloatenden Elemente (Überschrift und Inhalt).
Nun ein clearendes Element:

|--------------------Container--------------------|
|Überschrift {float:none}                         |
||-----------------|------------------------------|
||Menü {float:left}| Inhalt {float:none}          |
||Menü             |                              |
||Menü             |                              |
||----Menü Ende----|                              |
|Footer {clear:left}                              |
|--------------------Container Ende---------------|

Wenn Du nun davon ausgehen kannst, daß der Inhaltsbereich höher ist als das bzw. die floatenden Elemente, dann kannst Du dem Container eine Hintergrundfarbe zuweisen (in Deinem Fall grün), die dann durchgängig bis unten geht, und dem Inhaltsbereich eine andere Hintergrundfarbe (in Deinem Fall weiss für die Zwischenräume).

freundliche Grüße
Ingo