Nicola Straub: gefloatete Boxen clearen und dann gleichlang?

Beitrag lesen

Hi!

Erst mal danke!

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).

Aha, drum ging mein Container nur um das Top-Element und nicht
weiter.

Nun ein clearendes Element:

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

Hmmm.

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

Hab ich ja mal gemacht...

dann durchgängig bis unten geht, und dem Inhaltsbereich eine andere Hintergrundfarbe (in Deinem Fall weiss für die Zwischenräume).

Das bedeutet, ich muss um die Mitte und rechts noch eine Box drumrum
machen, die ich dann weiss setzen kann...

Dann habe ich zwar den gruenen Bereich 'bis unten' - aber Mitte und links
machen immer noch, was sie wollen ;-(

Nur um's wirklich zu verstehen: Was _sagt_ dieses 'clear' denn nun genau
dem Browser? Ich schreibe es unten in das _umfloatende_ rechts-Element
rein, laut deiner Skizze. Also nicht am Ende des floatenden Elementes. Das
sit schon aehnlicher dem frueheren <br clear=all>, neben einem Bild
mit align,
wenn der folgende Text nicht mehr umfliessen soll.

Bei mir aber floatet (leider, *seuftz*) alles unterhalb des top-DIVs,
der Container zieht sich aber brav unter die alle drunter, wenn ich
_ihn_ 'cleare'. Ich verstehe, dass dies das von dir berechnete Ver-
halten ist und muss es mir einfach merken. Denn ich verstehe immer
noch NICHT die Logik - was denkt sich der Browser:

"Da ist dieses Element #bla, das hat die Eigenschaft
    'float', also kuemmere ich mich um dieses nicht".
Und ein paar Zeilen liest er das clearing und denkt:
"Da ist dieses Element #bla, das hat die Eigenschaft
    'float' nicht (mehr), also muss ich das beachten".

Verstehst du, was ich meine: Wie kann denn eine _Eigenschaft_
'gleichzeitig'
unterschiedlich sein. Hm, das trifft's nicht. Anders: Ob ich etwas bin,
um das man rumlaufen muss oder wo man durchschluepfen kann - das sind
doch komplett gegenlaeufige Auspraegungen dieser Eigenschaft. Wand oder Nebel.
Wie kann etwas erst Wand sein und dann ploetzlich Nebel?

Manchmal denke ich, mein Hirn ist nicht 'floatingly' enough, um diese
Grundprinzipien der CSS-Denke zu kapieren.

Nunja, steter Tropfen hoelt den Stein - vielleicht weicht auch mein
Granitbrett vor dem Kopf (bezueglich all der anderen Dinge) noch auf.
Nur habe ich nur wenige Tage fuer dieses Layout ;-(

Herzliche Gruesse

Nicola