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.

Die beliebtesten Bildergalerien
Youtube-Gema-Sperre umgehen
Galerie
Videos freischalten
Solange YouTube und die GEMA sich streiten, schauen deutsche Musikfreunde in die Röhre. Mit den Tipps in der Galerie lässt sich die YouTube-Sperre…
Beste WLAN-Router
Galerie
Top 5
WLAN-Router dienen als Zentrale für Internet und WLAN. Wir zeigen Ihnen die fünf Geräte, die im Test am besten abgeschnitten haben.
Microsoft hat eine neue Windows-10-Preview als ISO-Download veröffentlicht.
Galerie
God Mode, Virtual Desktops , Startmenü & Co.
Wir verraten 20 Tipps und Tricks für Windows 10: Damit haben Sie das neue Microsoft-Betriebssystem zum Release direkt im Griff.
Weitere Bildergalerien entdecken
Einen chronologischen Überblick über alle bisherigen Bildergalerien finden Sie in unserem Archiv-Bereich. Entdecken Sie unsere faszinierende Bilder!