Positionierung in CSS durch float

Textfluss als Positionierungswerkzeug wählen

Zu den stärksten Möglichkeiten der Positionierung von Elemente zählt der float-Befehl. Mit ihm können Bilder und ganze Ebenen aneinandergekettet werden - oder eben auch nicht. Denn zum float-Befehl gehört auch der clear-Befehl, der float ad absurdum führen kann.

Das grundsätzliche Problem war, dass man behindertengerechte Webseiten haben wollte, aber die verschiedenen Divs wollen nicht so wie vorher die HTML-Navigationnen. Aber man hat gelernt, mit float die logische Verbindung von linker Spalte, Hauptspalte und rechter Spalte durch Divs und float zu vereinen und das klappt so gut, dass float zu einer der wichtigsten Erungenschaften in CSS wurde.

Vernetzung von Elemente oder Deaktivieren der Verbindungen durch CSS und float

Webhosting mit viel Software bei Alfahosting (Affiliate-Link)

Wenn beispielsweise ein Div-Container mit

float:left;

definiert wird, dann schließt er sich positionsmäßig dem vorherigen Element an. Diese Positionierung kann um die Abstandsangaben verfeinert werden, sodass beispielsweise zwei Ebenen durch den margin-Befehl um 20 Pixel voneinander getrennt positioniert werden können.

mit clear:left;

Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)

beendet man den Vorgang. Das nächste Element würde erst in der nächsten Zeile wieder dargestellt werden, auch wenn in der vorherigen noch ausreichend Platz herrschen würde. Neben der Angabe left ist auch right und none, wobei none die Voreinstellung ist, die nicht extra angegeben werden müsste.

float:right bedeutet, dass sich das Element am rechten Rand orientiert. So könnte man bei einem dreispaltigen Layout die linke Spalte mit left, die mittlere ebenso mit left und die rechte Spalte mit right definieren. Die Mittelspalte lehnt sich an die linke (meist die Navigationsspalte) an, während die rechte sich für die Position der Mitte nicht interessiert und automatisch rechts angebracht wird.

Float in der Praxis

Die Angabe float ist in CSS nur ein Wort, aber mit diesem Wort werden ganze Webseiten gestaltet. Bilder werden entsprechend linksbündig oder rechtsbündig aneinandergereiht, Überschriften werden mit clear:left; so definiert, dass sie immer eine vollständige neue Zeile beginnen. Dadurch verhindert man, dass die Überschrift zu einem kurzen Zeit gestellt und/oder verschoben wird. Textbereiche werden dem vorherigen Textbereich angeschlossen und wieder ist float:left; im Einsatz, obwohl man die Bereiche untereinander stellt und nicht nebeneinander.

Es gibt sehr viele Anwendungen und zwar auch bei Module, die CSS mit float gleichfalls nutzen.

Lesen Sie auch

Die Positionierung ist in CSS eine der Hauptaufgaben und am Anfang nicht immer schlüssig. Margin wird gerne mit Padding verwechselt und nicht jedes float ist richtig gesetzt. Aber wenn man sich eingearbeitet hat, hat man ein mächtiges Werkzeug zur Verfügung. Wichtig ist dabei das Verständnis der Positionsarten.

Ein ganz eigenes Thema ist float, das eigentlich als Textfluss umschrieben werden muss. Doch es regeln das Verhältnis von ganzen Textbereichen oder den Hauptspalten zueinander ebenso.

Ebenfalls sehr oft im Einsatz sind natürlich die Abstände - Abstand vor und nach der Überschrift, vor und nach dem Text sind nur ein paar der Situationen.

Weitere Möglichkeiten bestehen darin, die Breite zu begrenzen oder die Höhe fest anzugeben. Auch die Arbeit mit verschiedenen Schichten oder auch Ebenen mit Indexangabe ist eine Option bei der Positionierung.

Themenseiten

Startseite CSS-Grundlagen

Positionierung in CSS durch float

Textfluss als Positionierungswerkzeug wählen

Vernetzung von Elemente oder Deaktivieren der Verbindungen durch CSS und float

Float in der Praxis

Lesen Sie auch

Diesen Artikel teilen

Infos zum Artikel

Kategorien

Interner Bereich