CSS: DIV-Höhe trotz float

Bei komplexen Web-Strukturen kommt es häufig zu Problemen mit der CSS-Eigenschaft „float“. Elemente rutschen ungewollt nach oben, Container besitzen keine Höhe und so kann es zu fehlerhaften Darstellungen kommen oder diverse Elemente springen scheinbar unkontrolliert nach rechts und links.

Gerade für flexible mehrspaltige Layouts ist es wichtig, dass man diese CSS-Eigenschaft beherrscht und die nötigen Kniffe und Tricks kennt.

Manchmal rutscht ein DIV-Container ungewollt nach oben und sollte eigentlich unter dem vorherigen Elementen angeordnet werden.

Dies kann durch das Clearing der Floats verhindert werden. „Clear: both“

 

Ein weiteres Problem ist das kollabieren des Parent-Elements. Wenn alle Elemente in einem Parent-Element gefloatet sind, entsteht ein Höhen-Problem und die Child-Elemente sind nicht mehr vom Parent-Element eingeschlossen.

„Overflow: hidden“ löst dieses Problem. Diese Eigenschaft wird auf das Parent-Element angewendet, damit die Child-Elemente wieder eingeschlossen werden. Man sollte bei dieser Variante allerdings vorsichtig sein, da dadurch Elemente innerhalb des Parent-DIV's abgeschnitten werden.

Tipps und Tricks

Das Arbeiten mit Floats ist keine große und geheimnisvolle Wissenschaft. Es ist wesentlich einfacher, als es sich im ersten Augenblick anhört. Bei der Arbeit in deinem Layout, sollte man vom groben ins Feine arbeiten. Zuerst legt man sein grobes Seiten-Layout an. Sprich Header, Highlighted Region, Content Area, Sidebar’s und Footer mit den gewünschten Floats und ihren Abständen. Anschließend können weitere Elemente dem Layout eingebaut werden.

Für die Positionierung im Layout sollte man vorübergehend mit verschiedenen Hintergrundfarben für die einzelnen Regionen arbeiten. So hat man einen viel besseren Überblick, ob die Elemente auch an der richtigen Stelle sitzen und man erkennt schnell, ob das HTML optimierungsbedarf hat.

Für die Entwicklung sind weitere Tools eine große Hilfe. Mit dem Firefox Addon Firebug oder dem Google Chrome Developer Tool kann man die CSS-Styles und das HTML Markup im Browser kontrollieren und so können schnell Fehler ausfindig gemacht werden.