Wieviele Elemente lang gilt FLOAT?

[Aqua]

Hallo!

Zitat von http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#float

left = Element steht links und wird rechts davon
von nachfolgenden Elementen umflossen.

Dementsprechend müsste das da gehen:

<div style="width:200px; float:left;"> bla </div>
<div style="width:200px;> bla </div>
<div style="width:200px;> bla </div>

Das 1. DIV passt,
das 2. DIV ist neben dem 1. DIV (passt auch)
und das 3. DIV ist in einer neuen Zeile.

Warum?

Alle nachfolgenden Elemente sollten das doch wissen?

left = Element steht links und wird rechts davon
von nachfolgenden Elementen umflossen.

Danke!
Aqua

[Aqua]

Also die eigentliche Frage lautet:

=> WARUM ist das 3. DIV in einer neuen Zeile,
ich dachte es würde in der gleichen Zeile wie
die ersten beiden stehen  weil ... Begründung siehe Zitat des Postings

Danke!

[Die allwissende Müllhalde]

<div style="width:200px; float:left;"> bla </div>
<div style="width:200px;> bla </div>
<div style="width:200px;> bla </div>

Das 1. DIV passt,
das 2. DIV ist neben dem 1. DIV (passt auch)
und das 3. DIV ist in einer neuen Zeile.

Warum?

Weil für das dritte rechts neben den ersten beiden kein Platz mehr ist. Mehr kann man dazu ohne Beispielseite nicht sagen.

[Die allwissende Müllhalde]

<div style="width:200px; float:left;"> bla </div>
<div style="width:200px;> bla </div>
<div style="width:200px;> bla </div>

Das 1. DIV passt,
das 2. DIV ist neben dem 1. DIV (passt auch)
und das 3. DIV ist in einer neuen Zeile.

Warum?

Weil für das dritte rechts neben den ersten beiden kein Platz mehr ist. Mehr kann man dazu ohne Beispielseite nicht sagen.

..vorausgesetzt, Du benutzt fehlerfreien Code und nicht den Kram da oben.

[wahsaga]

hi,

<div style="width:200px; float:left;"> bla </div>
<div style="width:200px;> bla </div>

dieser zweite div ist nach wie vor ein block level element, erzeugt also einen umbruch.

<div style="width:200px;> bla </div>

gruss,
wahsaga

[Die allwissende Müllhalde]

<div style="width:200px; float:left;"> bla </div>
<div style="width:200px;> bla </div>

dieser zweite div ist nach wie vor ein block level element, erzeugt also einen umbruch.

Auch Blockelemente umfließen float-Elemente. Was denkst Du, wie <p>-Absätze sonst funktionieren würden?

[wahsaga]

hi,

dieser zweite div ist nach wie vor ein block level element, erzeugt also einen umbruch.

Auch Blockelemente umfließen float-Elemente.

wer hat etwas anderes behauptet?

der zweite div umfließt den ersten, weil der erste float:left hat.
der dritte steht aber in einer neuen zeile, weil der zweite div nicht gefloatet ist.

Was denkst Du, wie <p>-Absätze sonst funktionieren würden?

was hat das mit dem thema zu tun?

gruss,
wahsaga

[Siechfred]

Hallo wahsaga.

der zweite div umfließt den ersten, weil der erste float:left hat.

Soweit Zustimmung.

der dritte steht aber in einer neuen zeile, weil der zweite div nicht gefloatet ist.

Hm. Heißt es nicht, dass eine Box mit "float:left" vom gesamten folgenden Inhalt umflossen wird?

Grüße
Siechfred

[Henryk Plötz]

Moin,

Hm. Heißt es nicht, dass eine Box mit "float:left" vom gesamten folgenden Inhalt umflossen wird?

Ja, wird sie ja auch. Aber eben nur so weit wie die floatende Box lang ist. Der nachfolgende Inhalt ist in diesem Beispiel zwei Zeilen lang, die floatende Box nur eine Zeile.

[Ingo Turski]

Hi,

Aber eben nur so weit wie die floatende Box lang ist. Der nachfolgende Inhalt ist in diesem Beispiel zwei Zeilen lang, die floatende Box nur eine Zeile.

Nein, das hat damit nichts zu tun. Selbst wenn die floatende Box mehr Inhalt hätte, erzeugt das zweite DIV einen Absatz.

freundliche Grüße
Ingo

[Henryk Plötz]

Moin,

Nein, das hat damit nichts zu tun.

Es hat etwas mit dem anscheinend wahrgenommenen 'Problem' zu tun, dass das dritte div nicht auch neben dem ersten ist.

Selbst wenn die floatende Box mehr Inhalt hätte, erzeugt das zweite DIV einen Absatz.

Davon bin ich ausgegangen dass das klar ist.

[Ingo Turski]

Hi,

Hm. Heißt es nicht, dass eine Box mit "float:left" vom gesamten folgenden Inhalt umflossen wird?

Schon. aber es heisst auch, daß ein blocklevel-Element, so es denn wie hier das zweite DIV nicht floatet, einen Absatz macht. Das dritte DIV wird also genau genommen nicht unter das floatende erste, sondern unter das zweite gesetzt. Verständlich?

freundliche Grüße
Ingo

[Siechfred]

Nabend Ingo, nabend Henryk.

Da war ich wohl auf dem Holzweg.

Grüße
Siechfred

[Henryk Plötz]

Moin,

Zitat von http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#float

left = Element steht links und wird rechts davon
von nachfolgenden Elementen umflossen.

Dementsprechend müsste das da gehen:

<div style="width:200px; float:left;"> bla </div>
<div style="width:200px;> bla </div>
<div style="width:200px;> bla </div>

Das 1. DIV passt,
das 2. DIV ist neben dem 1. DIV (passt auch)
und das 3. DIV ist in einer neuen Zeile.

Ist doch richtig. Die drei Divs sind alle ca. 1 Zeile hoch. Das erste div wird links gefloatet, bei den anderen hast du keine Angaben gemacht. Das bedeutet, das dritte div steht unter dem zweiten div.

Fassen wir zusammen: Das erste div floatet links und ist 1 Zeile hoch. Jetzt wird das zweite div ausgelegt und sein Inhalt landet rechts vom ersten div. Immer noch 1 Zeile hoch. Nun kommt das dritte div, unter das zweite.

(Anm.: Um den von dir vermutlich gewünschten Effekt zu erreichen muss das zweite div übrigens 400px breit sein)

Vielleicht solltest du ein bisschen http://www.positioniseverything.net/ lesen, da gibt es Artikel die die ganze Float-Geschichte erklären.

[Detlef G.]

Hallo Aqua

Du machst es einem echt schwer, dir zu helfen. Auf deine erste Frage, wie es wohl richtig ist, 3 Divs zu floaten, schrieb ich dir, mit ein paar kurzen Beispielen, dass es _die_ richtige Lösung nicht gibt, weil es verschiedene richtige Lösungen gibt, je nachdem, was man genau bezweckt.
Statt dort weiterzufragen, öffnest du einen Thread nach dem anderen, jeweils mit einem neuen Teilproblem, und machst es den Antwortern unnötig schwer.
Wenn ich auf eine Frage antworte, dann schaue ich immer wieder in diesen Thread, selbst wenn ich wenig Zeit habe und nicht dazu komme, neue anzusehen.

Mit jedem neuen Thread schreibst du eine neue Frage, so dass der, der dir helfen will, sich mühsam durch alle kämpfen muss, um dann eventuell so langsam zu begreifen, wie dein gewünschtes Ergebnis so ungefähr gemeint sein könnte.

Schreib doch bitte an einer Stelle, was du eigentlich genau willst.
Wenn ich so alles zusammennehme scheint es so, dass du also 3 Bereiche benötigst, die sich starr verhalten, also nicht untereinander rutschen, diese scheinen lückenlos anneinanderstoßen zu sollen.

Wie breit sollen diese sein?
Absolute Breite, oder Prozente des Anzeigefensters?
Alle genauso breit?
Alle absolute Breite oder eines flexibel?
Welche Höhe?
usw., usw.

Dies sind alles Fragten, als erstes eindeutig beantwortet werden sollten, um genau dafür die richtige Lösung zu finden.

Ich hatte in deinem ersten Thread ein paar Beispiele verlinkt, wäre es so schwer gewesen, z.B. zu schreiben: "Es soll so aussehen, wie Version X auf der Seite Y, nur dass die Divs immer neben einander bleiben sollen und außerdem dies oder jenes nicht so sondern so aussehen soll."

MFG
Detlef