Fließen und fließen lassen


So, nach dem gepflegten Chaos der relativen Positionierung wieder was Vernünftiges: Die "fließende" Positionierung mit "float".

#6

"Fließend" positionierte Bereiche haben die oft höchst erwünschte Eigenschaft, Text (oder andere Bereiche) um sich herumfließen zu lassen. Die exakte Positionierung, die bei #6 durch das Padding des Elternobjektes bestimmt wird, läßt sich dabei, wie an #7 zu sehen, beliebig steuern. "Float" kann aber noch mehr, weil es nicht nur Texte, sondern auch alle anderen Elemente zum "Fließen" bringt. Mit "float" lassen sich daher Elemente an den linken bzw. rechten Rand des übergeordneten Objekts kleben. Die Positionierungswerte können auch hier wieder absolut (in px) oder relativ (in %) angegeben werden.

#7

Man kann das benutzen, um bestimmte Elemente einer Website - z.B. Menüs - zuverlässig an den Rand des Browserfensters zu bringen. Wenn man mehrere Bereiche (hier #8 und #9) auf gleicher Höhe "floaten" läßt, ordnen sie sich nebeneinander jeweil soweit rechts. bzw. links an, wie es geht, ohne sich zu überlagern. Dieser Effekt ist enorm praktisch, um weitgehend pixelgenaue mehrspaltige Layouts zu realisieren.

Ein merkwürdiger Sonderfall in der Anwendung von floatenden Bereichen wird im Folgenden auf einer eigenen Seite dargestellt.

weiter

#2
#3
#4
#5
#8
#9