[domsson]

Moin,

ich hatte gehofft, mich nie mit dieser Thematik ans Forum wenden zu muessen, komme nun aber doch nicht drum herum. Es sei gesagt, dass ich viel gelesen habe und auch die Suchfunktion bemueht habe - wahrscheinlich gibt es bereits mehrere Themen, die mein Problem behandeln, ich habe in der Masse der Beitraege aber nichts passendes finden koennen.

Die Situation:
Ich habe ein 2 Spalten-Layout, also oben ein Header, unten ein Footer und dazwischen eine links gefloatete Navigation fester Breite, gefolgt vom Inhalts-div dynamischer Breite.

Funktioniert wunderbar, validiert auch, alles tutti. Jedoch begann ich soeben damit, Testinhalte einzufuegen, bestehend aus generischen Eintraegen, die jeweils aus einem Bildchen und ein bisschen Text daneben bestehen. Diese Eintraege haette ich gerne alle untereinander, das Bildchen immer links vom Text. Also habe ich es genauso wie bei dem Layout der ganzen Seite geloest: Das Bildchen links floaten lassen, dem Text einen schoenen Abstand nach links geben und innerhalb dieser Eintragbox noch ein clear-div, damit alles eingeschlossen bleibt.

Nun zum Problem:
Da ein clear immer alle vorhergehenden floats beruecksichtigt, wird der erste Eintrag durch das clear-div so gross gezogen, bis das clear-div mit der Unterkante der Navigation abschliesst. Scheint mir logisch, ich sehe, wo das Problem liegt. Nur: wie loese ich das?

Nach der Navi ein clear-div einbauen, das ist nicht so toll. Dann rutscht der komplette Inhalt an die Unterkante der Navi. Hm. Ich hoffe und vermute, dass die Loesung auf der Hand liegt, ich aber wieder einmal Betriebsblind bin.

Vereinfachter Testcase ist online: 2-Spalten-Layout, FLOAT/CLEAR-Problem - Testcase

Danke im Voraus. ;}

[Elchi3]

Hi,
schonmal versucht dem .clear nur "clear: right;" zu geben?

[fricca]

Frag bitte die Suchfunktion nach "Block Formatting Context".
Das Problem des "globalen Clears" gab es schon oft, z.B. gerade eben in einem Parallelthread.

schonmal versucht dem .clear nur "clear: right;" zu geben?

Da das fragliche Clear den links floatenden Bildern gelten soll, ist clear:right dann nutzlos.

[domsson]

Danke fricca, mit diesem Stichwort finde ich relevante Artikel. Das mit dem BFC war mir noch nicht gelaeufig, habe das auf mein Beispiel nun angewandt, indem ich dem Inhalts-div "overflow: hidden" verpasst habe. Das macht die Sache im FF perfekt, im IE 6 zerhaut es das Layout damit erwartungsgemaess.

Ich habe allerdings beschlossen, die Seite ersteinmal fuer Standardkonforme Browser fertig zu schreiben und als zweiten Arbeitsschritt die Anpassung fuer die Problemfaelle per CC vorzunehmen. Ich hoffe, mit diesem Vorgehen falle ich nicht auf die Schnauze.

Fuer Leute, die das hier lesen und das gleiche Problem haben, fasse ich kurz zusammen, was ich jetzt in Erfahrung gebracht habe (ich bitte um Korrektur, falls ich Muell weitergebe):

Block Formatting Context beschreibt Methoden, mit denen sich "clears" in ihrer Wirkung auf bestimmte Elemente beschraenken lassen. Mit "overflow: hidden" habe ich dieses Verhalten nun fuer das Inhalts-div ausgeloest, somit kann ich darin problemlos clearen. Meine Quelle: Control Block Formatting Context.

Wenn aus der Sache weitere Probleme resultieren (ich z.B. spaeter die Anpassung an den IE nicht hinbekomme), dann melde ich mich hier erneut.

Oh, eines noch:

Zitat von fricca

Da das fragliche Clear den links floatenden Bildern gelten soll, ist clear:right dann nutzlos.

Wolltest Du damit sagen, dass ich die Aufgabe an dieser Stelle besser auf anderem Wege geloest haette? Wenn ja, immer her mit den Ideen.

[fricca]

Zitat von domsson

Danke fricca, mit diesem Stichwort finde ich relevante Artikel. Das mit dem BFC war mir noch nicht gelaeufig, habe das auf mein Beispiel nun angewandt, indem ich dem Inhalts-div "overflow: hidden" verpasst habe.

overflow ist eine kritische Eigenschaft, die eher zu meiden ist, wenn es nicht im eigentlichen Sinne gebraucht wird.
Hier rate ich davon ab.

Das macht die Sache im FF perfekt, im IE 6 zerhaut es das Layout damit erwartungsgemaess.

Im IE<7 wirkt overflow nicht; hasLayout hätte den erwünschten Effekt.

Block Formatting Context beschreibt Methoden, mit denen sich floats in ihrer Wirkung auf bestimmte Elemente beschraenken lassen.

Ein Block Formatting Context wird durch bestimmte Eigenschaften hervorgerufen/etabliert ("establish" heißt es in der Spezifikation) und lässt sich wohl am ehesten beschreiben als eine Art eigenständiger Seitenbereich.
Was hier beschränkt werden soll ist die Wirkung des Clear.

Mit "overflow: hidden" habe ich dieses Verhalten nun fuer das Inhalts-div ausgeloest, somit kann ich darin problemlos clearen. Meine Quelle: Control Block Formatting Context.

Ja, overflow ist eine der Eigenschaften, die einen BFC etablieren -- aber browserübergreifend schlecht kontrollierbar (schau mal in Opera und Safari).
Wenn immer es geht, stellt float die praktikabelste Lösung dar.
Eine einfache Methode: Ein weiteres Element in #content hineinschachteln; diesem float und width:100% geben.

Wolltest Du damit sagen, dass ich die Aufgabe an dieser Stelle besser auf anderem Wege geloest haette?

Fraglich sollte nur heißen: "das Clear, um das es hier geht".

Ob es in deinem speziellen Fall andere Lösungen gäbe, kann ich am Musterinhalt schlecht beurteilen. Wenn die Bilder z.B. immer gleich hoch sind, könnte man auf das Clear verzichten und mit einer Mindesthöhe arbeiten.
Das will ich aber nicht empfehlen -- und es würde auch das grundsätzliche Problem des globalen Clears nicht lösen.

[EvT]

Darf ich an dieser Stelle einmal auf den zweiten Link in Friccas Signatur hinweisen? Nicht nur weil dort genau dein Layout und deine Probleme mit diesem Layout beschrieben ist, sondern auch, weil dort die möglichen Lösungen ausführlich und sehr kompetent mit allem Für und Wider beschrieben sind.

Für die, die das Buch bereits besitzen: S. 111 ff.

[domsson]

Zitat von fricca

Was hier beschränkt werden soll ist die Wirkung des Clear.

Ich habe meinen obigen Post dementsprechend editiert.

Zitat von fricca

Ja, overflow ist eine der Eigenschaften, die einen BFC etablieren -- aber browserübergreifend schlecht kontrollierbar (schau mal in Opera und Safari).
Wenn immer es geht, stellt float die praktikabelste Lösung dar.
Eine einfache Methode: Ein weiteres Element in #content hineinschachteln; diesem float und width:100% geben.

Diesem Rat folgend, habe ich mir mein bereits vorhandenes div "contentwrapper", welches den Eigentlichen Inhalt der content-divs beherbergt, zugunsten gemacht und ihm "float: left" zugeteilt.

Das scheint wirklich eine praktikable Loesung, mit zwei Nachteilen:
1) dieses innere div ragt bei entsprechend grossem Inhalt nun aus dem eigentlichen content-div heraus, ich musste deshalb einen weiteren clear-div einbauen. (Nun, musste nicht, habe aber, eben wieder aus Praktikabilitaetsgruenden).
2) contentwrapper hatte eigentlich die Aufgabe, den kompletten Inhalt des content-divs mit einem huebschen 4px-Abstand (padding) zu versehen - das liess sich so exakt nun nicht mehr machen, ich habe es jetzt per "width: 99%; margin: 0.5%;" realisiert - das Ergebnis ist immerhin fast genauso befriedigend.

Schade, dass die Verwendung von floats oftmals doch wieder solche Elemente wie "clear-divs" noetig macht. Gut, mit entsprechendem Aufwand liesse sich das (groesstenteils) vermeiden, wie oft demonstriert wird, dann aber mit Kompatibilitaets- bzw. Praktikabilitaetsnachteilen.

Danke fuer die grosse Hilfe - das ganze hatte mich wirklich gewurmt und ich haette sicherlich viel mehr Zeit in die Problematik investieren muessen, haettest Du mir nicht auf die Spruenge geholfen!

Zitat von EvT

Darf ich an dieser Stelle einmal auf den zweiten Link in Friccas Signatur hinweisen?

Sollte ich eines Tages wider Erwarten doch eine entsprechende Investition taetigen wollen, dann werde ich diesen Ratschlag definitiv beherzigen.

-- So, dann will ich mal weitercoden. Ich behalte mir weitere Rueckfragen vor.

[domsson]

Nachdem ich nun dachte, mit friccas Methode wuerde es einwandfrei funktionieren (was es im FF und IE6 zu tun scheint), entdeckte ich gerade erneut ein Problem, diesmal im IE7.

Hier nochmal der Link zum Testcase: 2-Spalten-Layout, FLOAT/CLEAR-Problem - Testcase.

Problem: verschmaelert man den Viewport so weit, dass der Inhaltsbereich seine Mindesgroesse unterschreitet (ich nehme zumindest an, dass es an diesem Punkt geschieht), dann schiebt er sich komplett nach unten, wieder auf Hoehe Unterkante Navigation, wie es anfangs das Problem im IE6 war.

Sicherlich koennte ich dieses Problem auch selbst loesen, indem ich noch weitere Kapitel in den Geschichten von float/clear, Block Formatting Context, hasLayout, IE Bugs, etc. lese, jedoch muss ich sagen, dass ich ueber diese Themen in den letzten Tagen soviel gelesen habe, dass mir wirklich der Kopf qualmt und ich den Durchblick einfach verloren habe. Deshalb baue ich mal wieder auf eure Hilfe...

[fricca]

Nachdem ich nun dachte, mit friccas Methode wuerde es einwandfrei funktionieren

Das ist nicht "meine" Methode.
Das ist eine von mehreren Herangehensweisen mit dem "Problem" des globalen Clears umzugehen.
Bitte definiere "funktionieren" nicht anhand von Browserbugs.

Entferne deine diversen min-width-Angaben.
Gib einmal min-width für body an.

[domsson]

Zitat von fricca

Das ist nicht "meine" Methode.

Stimmt, damit wollte ich auch eigentlich zum Ausdruck bringen, dass mir diese Methode von dir vermittelt wurde.

Zitat von fricca

Bitte definiere "funktionieren" nicht anhand von Browserbugs.

Ich werde in Zukunft darauf achten.

Zitat von fricca

Entferne deine diversen min-width-Angaben.
Gib einmal min-width für body an.

Einfacheres CSS und die Anzeige entspricht nun auch im IE7 meiner Vorstellung - grossartig!

Danke, dass Du dir wieder einmal die Zeit genommen hast, mir zu helfen.