Galerie

Praktische Tipps für HTML und CSS - So nutzen Sie positionierbare Float-DIVs für eine mehrspaltige Anzeige.

So nutzen Sie positionierbare Float-DIVs für eine mehrspaltige Anzeige.

Tipp 1: CSS - Floating DIVs

So erzeugen Sie frei positionierbare Bereiche mit floating DIV-Elementen.


Wann immer Sie zusammenhängende Informationen in einem gemeinsamen Anzeigeblock auf Ihrer Webseite darstellen wollen, bietet sich der Einsatz des HTML-Elements DIV an. Diese Bereiche kann man separat behandeln, formatieren und auch sehr exakt positionieren. Ein idealer Einsatz für DIV-Elemente sind mehrspaltige Auflistungen und strukturierte Textblöcke.

Gegenüber einem klassischen Tabellen-Objekt haben die DIVs den großen Vorteil, dass Sie diese völlig frei auf der Webseite platzieren und durch eine Vielzahl an Formatierungsobjekten gestalten können.

Die freie Positionierung erreichen Sie über das Style-Element float. Hierbei legen die verfügbaren Parameterwerte right, left, none die Positionsseite des Elementes und die Richtung des Textumflusses um dieses herum fest. Kombinieren Sie dieses Element nun mit anderen Elementen auf der Webseite, dann ist die korrekte Umflussrichtung um diese DIV-Elemente durchaus wichtig und strikt zu beachten.

Setzen Sie nun zusätzlich noch den Parameter width ein, so können Sie den prozentualen Größenanteil des Floatbereiches festlegen und damit zum Beispiel Spaltentrenner erzeugen. Legen Sie beispielsweise zwei gegenüberliegende DIV-Bereiche an, die floaten und eine Breite von 45 Prozent besitzen, so wird automatisch ein Spaltenzwischenraum von 10 Prozent der Seitenbreite erzeugt.

Verwenden Sie den Parameter clear:, um den Textfluss zu unterbrechen und zur normalen Formatierung zurückzukehren.