float und clear

[Encoder]

Hallo zusammen
Ich habe schon wieder die Ehre mich um eine verstylte Seite kümmern zu 'dürfen'.
Ein Beispiel wie das designt ist gibts hier: http://jsfiddle.net/fuemLz3d/

Schien mir erst logisch. Es sollen zwei Spalten nebeneinander stehen, die linke fix breit. Nun ist auf einer Unterseite ein gefloateter Text in der rechten Spalte. Der float wird wieder aufgehoben, danach soll es ungefloatet weitergehen.
Was jetzt auffällt ist der gezeigte Effekt. Weiter geht es erst nach der gefloateten linken Spalte, wenn deren Inhalt zu Ende ist.
Als Lösung wollte ich den block formatting context für die rechte Spalte mit overflow:... neu "öffnen" oder wie man das nennt. Dann passt es, hat aber leider zur Folge dass overflow sich für alle Werte außer visible nicht mehr so verhält wie es eigentlich soll. Nämlich wenn zu wenig Platz ist, soll die ganze Seite einfach scrollen. Nicht die rechte Spalte soll scrollen, nicht gar nichts soll scrollen...

Jetzt frage ich mich wie ich das verschönern kann. Ich blicke nicht mehr durch. Hat diese Struktur überhaupt Zukunft oder ist das völliger Murks?
Wie könnte ich das mit dem clear lösen? Ich will dass der clear nur in der rechten Spalte wirkt.
Brauche ich eine der Alternativen zu overflow um den block formatting context rechts neu zu setzen?

[Encoder]

Sorry Link hat sich geändert: so ists richtig

[MrMurphy]

Hallo

Hat diese Struktur überhaupt Zukunft oder ist das völliger Murks?

Das war und ist schlicht Murks. Es reicht doch schlicht float: left und ein einziges clearfix und gut ist. Warum so viel unnützes Gedöns?

Gruss

MrMurphy

[Encoder]

Warum so viel unnützes Gedöns?

Das erste float setzt die divs nebeneinander. Das zweite im rechten div setzt einen Text rechts an die Überschrift. Solche Paare aus Text-Überschrift gibt es einige. Deswegen wäre mir eine Lösung aus reinem css auch am liebsten. Da müsste ich am wenigsten umstellen.

Ein clear:right; würde das lösen, da das nicht den float:left; der linken Spalte beeinflusst. Ich möchte es aber robust machen, falls in irgendeiner Seite dann doch mal noch ein float:left auftaucht. Dann entsteht das selbe Problem nämlich wieder.

Gestern abend bin ich noch soweit gekommen, die rechte Spalte auf position:relative zu setzen. Dann gibts rechts ebenfalls einen eigenen block context und die Sache sollte nach meinem Verständnis passen.
Mit welchen Problemchen ist dabei noch zu rechnen?

[MrMurphy]

Hallo,

Was kannst / darfst du an dem HTML- und CSS-Quelltext überhaupt ändern? Es nützt ja nichts wenn wir dir Antworten geben, die du dann überhaupt nicht umsetzen kannst.

Mit welchen Problemchen ist dabei noch zu rechnen?

Ist die Frage ernst gemeint? Wie sollen Außenstehende die auch nur ansatzweise korrekt beantworten können ohne den Rest der Seite zu kennen?

Das deine Lösung überkandidelt ist habe ich ja bereits geschrieben. Da noch mehr Anweisungen reinzuschreiben ist grundlegend verkehrt.

Gruss

MrMurphy

[Encoder]

Hallo

Was kannst / darfst du an dem HTML- und CSS-Quelltext überhaupt ändern?

darf: alles
will: möglichst wenig
soll: so viel dass es funktioniert
:-)

Mit welchen Problemchen ist dabei noch zu rechnen?
Ist die Frage ernst gemeint? Wie sollen Außenstehende die auch nur ansatzweise korrekt beantworten können ohne den Rest der Seite zu kennen?

Ich möchte erreichen dass in beiden divs gefloatet werden kann, ohne dass die floats und clears über die divs hinaus wirksam werden. Sonst wird der Inhalt irgendwann mal geändert und das Spiel geht von vorne los. Für diese Abschottung suche ich eine Lösung. Da gibts nicht mehr zu zeigen, das Beispiel zeigt schon das grundlegende Prinzip der Seiten. Links eine Spalte mit Navigation, rechts eine mit dem Inhalt. Im Inhalt sind jetzt neuerdings floats mit clear enthalten, die das Prinzip unbrauchbar machen. Ich soll jetzt eine Korrektur dafür finden.

Klar war das ernst gemeint. position:relative scheint das Problem zu lösen. Ich weiß nur nicht was ich mir damit wieder an anderen Seiteneffekten einhandle.

Das deine Lösung überkandidelt ist habe ich ja bereits geschrieben. Da noch mehr Anweisungen reinzuschreiben ist grundlegend verkehrt.

Ich werf gerne auch welche raus. Mir fehlt nur der Plan.

Es reicht doch schlicht float: left und ein einziges clearfix und gut ist.

Wie genau würdest du das umsetzen? Wo würdest du den clearfix setzen?

[Matthias Apsel]

Om nah hoo pez nyeetz, Encoder!

Links eine Spalte mit Navigation, rechts eine mit dem Inhalt.

Das deine Lösung überkandidelt ist habe ich ja bereits geschrieben. Da noch mehr Anweisungen reinzuschreiben ist grundlegend verkehrt.
Ich werf gerne auch welche raus. Mir fehlt nur der Plan.

Es reicht doch schlicht float: left und ein einziges clearfix und gut ist.
Wie genau würdest du das umsetzen? Wo würdest du den clearfix setzen?

Es sollte reichen, die Navigation zu floaten und dem Inhalt ein margin-left zu geben.

Matthias

[Auge]

Hallo

Es reicht doch schlicht float: left und ein einziges clearfix und gut ist.
Wie genau würdest du das umsetzen? Wo würdest du den clearfix setzen?

Es sollte reichen, die Navigation zu floaten und dem Inhalt ein margin-left zu geben.

Dann schägt aber wieder das ursprüngliche Problem zu. Benutzt er innerhalb des rechten Blocks float und anschließend clear, wirkt das clear auf alle floats. Es sollte reichen, dem rechten Block mit overflow: hidden; (ohne Angabe zur Höhe des Containers) einen eigenen Block-Formatting-Context zu verpassen oder gleich auf Flexbox zu setzen.

Tschö, Auge

[Matthias Apsel]

Om nah hoo pez nyeetz, Auge!

Es sollte reichen, die Navigation zu floaten und dem Inhalt ein margin-left zu geben.

Dann schägt aber wieder das ursprüngliche Problem zu. Benutzt er innerhalb des rechten Blocks float und anschließend clear, wirkt das clear auf alle floats. Es sollte reichen, dem rechten

_ungefloateten_

Block mit overflow: hidden; (ohne Angabe zur Höhe des Containers) einen eigenen Block-Formatting-Context zu verpassen

oder gleich auf Flexbox zu setzen.

Wie schon vorgeschlagen

Matthias

[Encoder]

Hallo ihr lieben

Der rechte Block ist nicht gefloatet. Das float ist innerhalb dieses Blocks und soll einen Text rechts neben die Überschrift bringen.
flexbox wäre natürlich auch eine Idee wobei das Zielpublikum dieser Seite möglicherweise auch noch mit einem Uralt IE unterwegs sein könnte, mangels Wissen und Können. Dann siehts schon wieder schlecht aus.
Wie würd ich die flexbox eigentlich anwenden? Dann müsst ich ja doch vieles umstellen? Wenn ich damit Versuche mache schiebts mir alles ineinander.

overflow:hidden würde funktionieren, allerdings gibts dann keinen Scrollbalken mehr wenn etwas breiter ist als der verfügbare Platz. Zum Beispiel ein Bild. Das kommt auch wieder nicht gut.
Gibts nichts womit ich einfach einen block formatting context erstellen könnte ohne dass sich das Verhalten grundlegend ändert? Ich versteh nicht warum das so kompliziert und miteinander verzahnt ist.

[Auge]

Hallo

Der rechte Block ist nicht gefloatet. Das float ist innerhalb dieses Blocks und soll einen Text rechts neben die Überschrift bringen.

overflow:hidden würde funktionieren, allerdings gibts dann keinen Scrollbalken mehr wenn etwas breiter ist als der verfügbare Platz. Zum Beispiel ein Bild. Das kommt auch wieder nicht gut.

Stimmt. Wenn du auf diese Lösung setzen solltest, musst du entweder dafür sorgen, dass nichts breiter als der zur Verfügung stehende Platz ist (z.B. Breitenangaben für Bilder in Prozenten) odser du nimmst overflow: scroll; [1] und lebst damit, dass die Scrollbalken, auch wenn sie nicht gebraucht werden, angezeigt werden. Dass die den verfügbaren Platz noch weiter einschränken, und das zudem auf jedem System mit unterschiedlichen Werten, ist wohl klar.

[1] Ich zähle schon mal den Countdown runter, bis Gunnar aufheult und „NAJIEN!!!11!1!elf! Mach das nie und nimmer!!!“ schreit.

Tschö, Auge

[Gunnar Bittersmann]

@@Auge:

nuqneH

du nimmst overflow: scroll; [1] und lebst damit, dass die Scrollbalken, auch wenn sie nicht gebraucht werden, angezeigt werden. Dass die den verfügbaren Platz noch weiter einschränken, und das zudem auf jedem System mit unterschiedlichen Werten, ist wohl klar.

[1] Ich zähle schon mal den Countdown runter, bis Gunnar aufheult und „NAJIEN!!!11!1!elf! Mach das nie und nimmer!!!“ schreit.

Warum sollte *ich* aufheulen? Ich verwende kein System, auf dem Scrollbalken angezeigt werden – außer wenn man gerade scrollt. Und auch dann legen sie sich drüber und schränken den verfügbaren Platz nicht weiter ein.

Qapla'

[Auge]

Hallo

du nimmst overflow: scroll; [1] …

[1] Ich zähle schon mal den Countdown runter, bis Gunnar aufheult und „NAJIEN!!!11!1!elf! Mach das nie und nimmer!!!“ schreit.

Warum sollte *ich* aufheulen? Ich verwende kein System, auf dem Scrollbalken angezeigt werden – außer wenn man gerade scrollt. Und auch dann legen sie sich drüber und schränken den verfügbaren Platz nicht weiter ein.

Da ich das von dir beschriebene Gebaren nur von Mobilgeräten kenne, sei die Frage gestattet: Du hast keinen PC oder ein vergleichbares Gerät in Verwendung?

Tschö, Auge

[Gunnar Bittersmann]

@@Auge:

nuqneH

Warum sollte *ich* aufheulen? Ich verwende kein System, auf dem Scrollbalken angezeigt werden – außer wenn man gerade scrollt. Und auch dann legen sie sich drüber und schränken den verfügbaren Platz nicht weiter ein.

Da ich das von dir beschriebene Gebaren nur von Mobilgeräten kenne, sei die Frage gestattet: Du hast keinen PC oder ein vergleichbares Gerät in Verwendung?

MacBook Pro. Durchaus mit PC vergleichbar. Nur eben mobil. ;-)

Qapla'

[Christian Kruse]

Moin Encoder,

diese Probleme treten immer mit gefloateten Layouts auf, das ist ein ganz großer Murks. Wenn du auf IE9 verzichten kannst, benutze flexbox.

LG,
 CK

[Gunnar Bittersmann]

@@Christian Kruse:

nuqneH

Wenn du auf IE9 verzichten kannst, benutze flexbox.

Progressive enhancement heißt nicht Verzicht.

Qapla'

[Christian Kruse]

Moin Gunnar,

Wenn du auf IE9 verzichten kannst, benutze flexbox.

Progressive enhancement heißt nicht Verzicht.

Das ist natürlich richtig.

LG,
 CK

[Matthias Apsel]

Om nah hoo pez nyeetz, Encoder!

Sorry Link hat sich geändert: so ists richtig

Die üblichen Verdächtigen, die float-Layouts ablösen oder ersetzen können, sind

• flexbox
• (display: inline-block)
• (absolute Positionierung)

Matthias