CSS: Wie muss man sich das mit float vorstellen?
Mit der CSS Eigenschaft float, kann man Objekte umfließen lassen. Float heißt soviel wie im Wasser schweben/treiben.
Am besten stellt man sich vor, dass man den Rahmen in der sich
das Objekt befindet, geflutet wird durch float. Bei uns heißt
dieser Div-Container Rahmen. Das Wasser drückt alles nach oben.
Der nachfolgende Bereich (Inhalt, bzw. Content) wird durch das
ansteigende Wasser nach oben gedrückt neben das Menü links. Alle
darunter liegenden schiebt es genauso an die anderen ran, so dass
keine Lücke entsteht. Das geht nur, wenn wir dem Inhalt nach dem
float Objekt keine Breite oder Position zuweisen, also flüssig
bleibt und sich um das Menü links verteilt.
Weisen wir dem Inhalt aber danach eine Breite zu, wird das ganze
zu einem festen Objekt, das nur nach oben schwimmen kann, wenn
genügend Breite rechts vom Menü (linke Seite) vorhanden ist.
Breite Inhalt muss < (kleiner) sein als Breite des freien Platz neben dem Menü links
Ist die festgelegte Breite des Inhalts kleiner als die freie Breite neben dem Menü, dann entsteht ein Loch mit der fehlenden Breite und die Hintergrundfarbe des Rahmen Divs schaut durch. Daher am besten nie eine Breite für den Inhalt nutzen, denn so passt der sich dann zu 100% dem freien Platz neben dem Menü links an.
Hat der Inhalt eine Positionsangabe, muss man sich das so vorstellen, dass der Inhalt festgebunden ist, oder einen Anker geworfen hat und so sich nicht bewegen trotz steigendem Wasser.
Beispiele dazu in der Kompozer Anleitung und Amaya Anleitung