CSS: float clearing begrenzen?

Seite 1 von 1 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/css-float-clearing-begrenzen_228267/page_1 - zur Vollversion wechseln!

Angenommen ich habe folgendes HTML und CSS setup: http://dl.dropbox.com/u/2309215/cssfloats/index.html

Also eine Art Menü, das links floated, danach normalen content in Form von mehreren article divs. In diesen articles befindet sich wiederum ein floatendes Element. Damit das article Element mit dem floatenden Element (Bild bspw.) abschließt, befindet sich innerhalb des articles noch ein clearing div (ich weiß, kann man auch eleganter mit :after lösen).

Das clearing verursacht aber, dass der erste Artikel nach dem floatendem Menü bis zum Ende des Menüs aufgezogen wird. Gibt es irgendeine Möglichkeit das clearing nur auf Elemente innerhalb des Eltern Elementes zu begrenzen?

Spricht etwas dagegen, die articles in einen eigenen Wrapper zu legen?

edit:

rein theoretisch würds auch so funktionieren (mit gesetzter width):

http://dabblet.com/gist/1603533

Prinzipiell nicht, aber so funktioniert es auch nur, wenn man eine width für den Container der articles angibt. Problem ist aber, dass ich diesen Content immer auf die verfügbare Größe aufziehen will, auch wenn das menu Element gar nicht im HTML vorkommt. Wenn man den Container der articles eine width gibt, dann ist das natürlich nicht mehr der Fall.

Kannst du feststellen, wann das menu-Element nicht vorkommt? Dann könnte man das relativ einfach mit einer Klasse am Wrapper lösen.

Eine Methode, wie man die clear-Regel nur auf einen Parent beschränkt, fällt mir nämlich gerade auch nicht ein.

Zitat von ill

Kannst du feststellen, wann das menu-Element nicht vorkommt? Dann könnte man das relativ einfach mit einer Klasse am Wrapper lösen.

Es würde auch so funktionieren:

http://dabblet.com/gist/1603686

die articles werden hier einfach auf "display: table" gesetzt, was das width-Attribut für den contentWrapper nicht mehr nötig macht.
Ist ein bisserl ein Hack und leider von IE7 nicht unterstützt.

In meinem Beispiel gibts halt jetzt noch das Problem, dass der Container nun generell über die ganze Seite geht, d.h. sobald die height des Menus nicht mehr ausreicht, werden die articles ganz an den Rand positioniert. Dürfte mit einem Padding mit dem Value der Width des Menüs auf dem contentWrapper jedoch zu lösen sein (wo wir dann wieder beim Problem ohne Menü wären )

Hm, gut das nehm ich vorerstmal in Kauf . Dass der content links keinen Margin nach dem Menü hat ist mir bewusst, prinzipiell so gewollt. Weil ansonsten müsste ich entweder tatsächlich eine table machen oder eben server seitig Klassen setzen/verändern, wenn auf einer Seite das Menü nicht da ist.

Na ok, display:table; is auch nix, dadurch werden die divs ja nicht mehr auf die ganze Breite aufgezogen (wenn nicht genügend content da ist).

http://little-boxes.de/lb1/14.5-vie...von-floats.html
weil ichs grad in RL lese das Buch. hth!

@Spikx: Wahnsinn, das is mir noch nie aufgefallen, ich hab aber auch zum größten Teil mit Layouts mit fixer Breite zu tun. Floating ohne Width-Angabe wird sehr schnell zu einem richtigen "pain in the ass"

Zitat von Flochiller

http://little-boxes.de/lb1/14.5-vie...von-floats.html
weil ichs grad in RL lese das Buch. hth!

Zitat von ill

@Spikx: Wahnsinn, das is mir noch nie aufgefallen, ich hab aber auch zum größten Teil mit Layouts mit fixer Breite zu tun. Floating ohne Width-Angabe wird sehr schnell zu einem richtigen "pain in the ass"

haha typo3 scnr

Zitat von Spikx

Hm, ganz hab ich nicht verstanden wie da auf http://little-boxes.de/lb1/14.7-set...ix-a-float.html das globale clearing Problem gelöst werden soll. Zumindest für meinen Fall. In seinem Beispiel funktioniert das ja nur, weil die divs eine fixe Breite haben, oder?

Zitat von PIMP

haha typo3 scnr

overclockers.at v4.thecommunity
© all rights reserved by overclockers.at 2000-2026