Wer seine Layouts mit tabellenfreiem, validen Code erstellt, wird das Problem kennen: Möchte man das floaten aufheben muss ein, meist leerer, Container mit der Eigenschaft clear erstellt werden. Dieser stört teilweise erheblich das Layout und dient nur dem clearen der floatenden Elemente.
Das es eine elegantere Lösung gibt, die ohne Hacks zuverlässig in allen Browsern funktioniert, ist den Meisten Entwicklern gänzlich unbekannt. Die Rede ist von overflow.
Schließen wir die floatenden Elemente mit einem overflow:hidden ein, spreizt sich der Container natürlich auf die gesamte Höhe aus, bis die Elemente ausgedehnt sind.
Der Effekt ist hier zu sehen. Es entfällt also komplett der störende clear-Container, und erzeugt auch saubereren, wartbareren Code.
Pingback: hype.yeebase.com
Tolle Sache, toller Tip! Somit hat sich eben mein Problem gelöst, dass ich seit Tagen versuche zu bewältigen!
Super Tipp! Funktioniert prima.
Das ist so simpel, da hätte man auch selber drauf kommen können
Ich bin begeistert und Danke für den Klasse Tipp.
Pingback: Gefloatete Elemente ohne leeren Container clearen » MountainGrafix :: Der Webwork und Technik Podcast – Aktuelle Themenbereiche wie Webdesign, Webstandards oder auch Web2.0.
Ola!
Ich verstehe nicht ganz, was an einem umschliessenden Div-Container besser sein soll, als an einem leeren Div-Container der folgt. Wenn man dem Clear-Div ne Breite 0.01em und Höhe 0.01em gibt, sollten die Auswirkungen auf das Layout doch minimal sein…
Ich verwende übrigens gerne br und hr für den Zwang zur neuen Zeile.
Mit hanfigen Grüßen
Steffen
@UsualRedAnt
Dies ist nur eine vorgestellte Alternative. Häufig ist es aber z.B. so, dass man sowieso ein umschließendes div nutzt, oder auch Elemente in einer Liste floatet. In diesem Falle ist ein umschließendes li sowieso vorhanden.
Was man zusätzlich beachten sollte, ist, dass ein umschließendes div semantisch korrekter ist , als ein leeres div.
Der Trick mit Breite und Höhe, sowie die clearenden Breaks sorgen allerdings in älteren IEs für Probleme. Das clearende hr sollte auch nur da eingesetzt werden, wo es semantisch korrekt ist.
Das ist EINE Möglichkeit des markupfreien Clearings. Nicht die Gängigste. Schau Dir mal die Kurzzusammenfassung mit Links in der YAML-Doku zu diesem Thema an: http://www.yaml.de/de/dokumentation/grundlagen/allgemeines.html
Ich sitze seit mehreren Stunden an den Float Elementen. Die Navigationen links und rechts sind statt oben am Ende der Webseite zu finden. Ich probiere mal die angeschnittene Lösung aus…
ich habe es mal schnell im wiki eingebaut
->http://wiki.mobbing-gegner.de/MacOSX/Apple_Braunschweig
und gestest. Eine schnelle und nette Idee. Danke!
Da hätte ich gleich Lust das als Macro zu verwursten!