Korrekt "FLOAT"en

[Aqua]

Hallo!

Wenn man 3 DIV's nebeneinander platzieren will,
scheinen sich die Leute nicht einig zu sein wie das geht.

Die 1. Variante besagt:

das 1. DIV ist OHNE float,
das 2. DIV hat float LEFT
und das 3. DIV hat float RIGHT

die 2. Variante sagt dass ALLE 3 DIV's float left brauchen

die 3. Variante macht das erste OHNE irgendwas
und das 2. und das 3. mit FLOAT LEFT.

andere geben den ersen beiden ein float left und dem letzten nur ein float:right

es gibt so viele verschiedene Arten und ich blick nicht mehr
welche die richtige ist....

Danke!
Aqua

[Detlef G.]

Hallo Aqua

es gibt so viele verschiedene Arten und ich blick nicht mehr
welche die richtige ist....

Dir "richtige" Möglichkeit gibt es nicht.
Welche Variante du verwendest, hängt vom gewünschten Ergebnis ab.

Hier ein paar Beispiele:

Sollen alle Divs feste Breite haben und links ausgerichtet sein und sich bei kleinerem Fenster untereinanderschieben, dann:

• 3x float:left mit width

Feste Breite rechts und links und mit untereinanderschieben:

• 1 oder 2x float:left mit width
• 1 oder 2x float:right mit width

alle rechts ausgerichtet:

• 3x float:right mit width

Spalte rechts und links, dazwischen veränderliche Breite

• 1x float:left, 1x float:rigth jeweils mit width
• 1x ohne float, ohne width aber mit margin-left und margin-right

Davon welche Variante du wählst, hängt es zum Beispiel auch ab, in welcher Reihenfolge die Divs untereinander rutschen, wenn das Browserfenster verkleinert wird.

MFG
Detlef

[Tom]

Hello,

da gab es doch neulich erst einen netten Mitposter, der was vorbereitet hat:

http://d-graff.de/demos/selfhtml/float_left_test.html

Liebe Grüße aus http://www.braunschweig.de

Tom

[Detlef G.]

Hallo Tom

http://d-graff.de/demos/selfhtml/float_left_test.html

Das war ja nur der Test für zwei Blöcke, hier wurde aber nach dreien gefragt.

Na gut, dann schieb ich den Test für drei Divs auch hoch.
http://d-graff.de/demos/selfhtml/dreidivs.html
http://d-graff.de/demos/selfhtml/dreidivs1.html

MFG
Detlef

[Tom]

Hello,

http://d-graff.de/demos/selfhtml/float_left_test.html

Das war ja nur der Test für zwei Blöcke, hier wurde aber nach dreien gefragt.

Na gut, dann schieb ich den Test für drei Divs auch hoch.
http://d-graff.de/demos/selfhtml/dreidivs.html
http://d-graff.de/demos/selfhtml/dreidivs1.html

Das ist ja wirklich schon eine gute Übersicht. Du solltest ein Feature-Artikel daraus machen. Sowas kann man nämlich immer wieder brauchen.

Hast Du auch einen IE-Hack gegen das Margin-Problem des ersten Float-Divs eines Abschnittes (bis zum clear:both)?

Liebe Grüße aus http://www.braunschweig.de

Tom

[Detlef G.]

Hallo Tom

Das ist ja wirklich schon eine gute Übersicht.

Die habe ich mir einmal gemacht, um selbst die Funktion von Float ein bisschen zu verstehen und vor dem hochladen nur noch den Link auf die jeweils andere Seite eingefügt.

Du solltest ein Feature-Artikel daraus machen. Sowas kann man nämlich immer wieder brauchen.

Da ist doch nichts besonders erwähnenswertes dabei, es sind doch lediglich ein paar Varianten untereinandergeschrieben.

Hast Du auch einen IE-Hack gegen das Margin-Problem des ersten Float-Divs eines Abschnittes (bis zum clear:both)?

Leider nein.
Ich versuche im Layout genug Luft zu lassen, dass dieser, wie auch das kaputte Boxmodel im Quirx-Modus bzw. bei alten IEs nicht gleich alles total zerhaut.

MFG
Detlef