Spalten nebeneinander

[Kalle_Worms]

Hallöle,

ich dachte, ich hätte ein Allerweltsproblem, habe aber im Archiv 2004 unter "spalten" nicht die Lösung gefunden.

Mir ist das PRINZIP von float offenbar nicht klar.

Ich habe Folgendes verstanden:
Wenn ein Block, z. B. <div ...> zuende ist, beginnt der nächste Block auf der Höhe des ersten Blocks:

.li   { width:49%; float:left; }
.re   { width:49%; float:right; }

<p style='clear:both'></p>
+<div class='li'>--+ +<div class='re'>--+
!                  ! !                  !
!                  ! !                  !
+</div>------------+ !                  !
                     +</div>------------+

Dieses Beispiel funzt ja auch, die beiden Spalten müssen nicht mal gleich hoch sein.

ABER:

.sp_1_3 { width:25%; float:left; }
.sp_2_3 { margin-left:2em; width:25%; float:left; }
.sp_3_3 { margin-left:2em; width:25%; }

<p style='clear:both'></p>
+<div class='sp_1_3'>+<div class='sp_2_3'>+
!                    !                    !
!                    !                    !
+</div>--------------+</div>--------------+
  +<div class='sp_3_3'>+
  !                    !
  !                    !
  +</div>--------------+

Spalte 2 hat keinen Abstand zu Spalte 1 und Spalte 3 sitzt unterhalb.

Was also macht FLOAT genau ?

Lieben Gruß, Kalle

[Detlef G.]

Hallo  Kalle

Was also macht FLOAT genau ?

Es nimmt das gefloatete Element aus dem Elementfluss, lässt den Inhalt der
folgenden Elemente um sich herumfließen, hat aber keinen Einfluss auf
ungefloatete nachfolgende Blockelemente.

Schau dir mal die Testseiten an, die ich mir gemacht habe, um das Verhalten
der Elemente dabei zu kapieren:

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

Verändere dort die Schriftgröße und die Fensterbreite.

Auf Wiederlesen
Detlef

[Kalle_Worms]

Hallo Detlef,

danke für deine Musterseiten. Ich habe daraufhin meiner dritten (also der rechten und letzten) Spalte auch noch ein float:left verpasst, obwohl um dieses <div> nichts mehr fließt.

Es nimmt das gefloatete Element aus dem Elementfluss, lässt den Inhalt der folgenden Elemente um sich herumfließen, hat aber keinen Einfluss auf ungefloatete nachfolgende Blockelemente.

Das dritte Element wäre ja Folgeelement des zweiten, aber es floss nicht ums zweite. Ein Blockelement muss also SELBST ein float haben, damit es fließt?

Ahaaaaa ! Habe ich gerade ausprobiert, das ist es. Also ich muss einem Blockelement sagen: "Lass andere fließen", damit es selber fließt. Da muss erst einer drauf kommen.

Kalle.

[wahsaga]

hi,

Das dritte Element wäre ja Folgeelement des zweiten, aber es floss nicht ums zweite. Ein Blockelement muss also SELBST ein float haben, damit es fließt?

nein, es darf nur nicht mehr als block dargestellt werden, weil dass ja einen umbruch impliziert.

es mit display:inline als inline-element zu formatieren, würde beispielsweise auch dafür sorgen, dass das element keinen umbruch mehr erzeugt, sondern sich neben die beiden gefloateten platziert, sofern platz vorhanden.

gruß,
wahsaga

[willie.de]

hallö nochmal,

enstchuldigt bitte die relative sinnfreiheit des postings! ich muss ganz einfach loswerden, dass wahsaga es sehr einfach und verständlich auf den punkt gebracht hat.

grüße aus Leipzig
willie

[willie.de]

hallö,

im grunde genommen ganz einfach: gib dem dritten div ebenfalls eine float-angabe. dann funktionierts - vorausgesetzt, deine margins funken nicht dazwischen (über die seitenbreite). block-elemente fließen einfach so (darunter) herum, solange du ihnen keine weiteren angaben machst; inline-elemente fließen entsprechend (rechts) daneben.

grüße aus Leipzig
willie

[willie.de]

hallö nochmal,

hallö,

block-elemente fließen einfach so (darunter) herum...; inline-elemente fließen entsprechend (rechts) daneben.

auf die schnelle ein übersetzungsfehler:
nicht postionierte bereiche fließen einfach so (darunter) herum...; zeilen/text-boxen (also zb. auch <p>) fließen entsprechend (rechts) daneben.
http://www.w3.org/TR/CSS2/visuren.html#floats

grüße aus Leipzig
willie

[MudGuard]

Hi,

Was also macht FLOAT genau ?

Gib den divs verschiedenfarbige border und etwas Inhalt, und Du siehst, was es macht:

.sp_1_3 { width:25%; float:left; border:1px solid red; color:red; }
.sp_2_3 { margin-left:2em; width:25%; float:left; border:1px solid blue; color:blue;  }
.sp_3_3 { margin-left:2em; width:25%; border:3px solid black; color:black; }

<div class='sp_1_3'>sp13</div>
<div class='sp_2_3'>sp23</div>
<div class='sp_3_3'>sp33</div>

cu,
Andreas