css float=left verhält sich als hätte es clear=both

[Marcus C]

Hi,

in diesem kleinen fiddle, wieso rutscht Block 3 weiter runter, je höher Block 2 wird? Ich möchte erreichen, dass Block 3 direkt unter Block 1 steht.

Hintergrundinfo: die Breite der Blöcke soll nachher in px angegeben sein, sodass bei breiten Screens alle 3 Blöcke nebeneinander stehen, und dann erst Block 3 runterrutscht und wenn der Screen sehr klein ist auch Block 2, sodass dann alle untereinander stehen.

Danke und Gruß Marcus

[Gunnar Bittersmann]

@@Marcus C

in diesem kleinen fiddle

Siehe dieses PS.

wieso rutscht Block 3 weiter runter, je höher Block 2 wird?

Wegen “If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box.” [CSS 2.2]

Ich möchte erreichen, dass Block 3 direkt unter Block 1 steht.

Mit CSS allein wird das nicht gehen. Aber mit JavaScript. (Neulich gesucht und gefunden.)

LLAP 🖖

[Marcus C]

Danke.

Habe an das Ende der function noch folgendes angehängt, damit das ulElement auch die passende Größe hat:

var most=0;
for (var i = 0; i < columns; i++) {
	if (columnHeights[i][1]>most) most=columnHeights[i][1];
}
ulElement.style.height=most + 'px';

[Gunnar Bittersmann]

@@Marcus C

Habe an das Ende der function noch folgendes angehängt, damit das ulElement auch die passende Größe hat:

Ja, da hab ich heute früh auch gerade noch drüber sinniert, dass das ulElement keine Höhe hat, wenn alle Listitems absolut positioniert sind, und nachfolgende Inhalte nicht darunter dargestellt werden (in y-Richtung), sondern darunter (in z-Richtung).

var most=0; for (var i = 0; i < columns; i++) { if (columnHeights[i][1]>most) most=columnHeights[i][1]; }

Eine Extra-Schleife und der Vergleich aufs Maximum sind allerdings nicht erforderlich. Das ist bereits da: in columnHeights werden ja die aktuellen Höhen aller Spalten festgehalten. columnHeights.sort(sortByHeight) sorgt dafür, dass die Spalte mit der geringsten Höhe im Array vorne steht, damit sie als nächstes befüllt wird. Aber auch dafür, dass die Spalte mit der größten Höhe ganz hinten steht. Da hat man die Information, die man für die Höhe von ulElement braucht. Es war lediglich die Zeile

ulElement.style.height = columnHeights[columns - 1][1] + 'px';

zu ergänzen. Ich hab das im Pen getan.

LLAP 🖖

[MrMurphy1]

Hallo

wieso rutscht Block 3 weiter runter, je höher Block 2 wird?

Das ist das ganz normale Verhalten bei float und von den Entwicklern vom HTML / CSS so vorgegeben. Siehe zum Beispiel

http://little-boxes.de/lb1/IV-css-positionierung.html

oder das folgende Video

https://www.youtube.com/watch?v=AhegyX7HkYY

Ich möchte erreichen, dass Block 3 direkt unter Block 1 steht.

Dann solltest du den Quelltext entsprechend ändern und zum Beispiel den Inhalt von Block 1 und Block 3 in ein div schreiben.

Wobei es schlechter Stil ist, Text direkt in Container wie div zu schreiben. Dafür ist in deinem Fall eher da p-Element geeignet, dass gleichzeitig dafür sorgen würde, dass Block1 und Block 3 auch in einem div untereinander stehen würden.

Oder du könntest eine Lösung mit JavaScript suchen, die dann aber auch alle Nachteile von JavaScript enthalten würde.

Hintergrundinfo: die Breite der Blöcke soll nachher in px angegeben sein,

Auch darauf solltest du verzichten. Wenn du die Seite flexibel gestalten willst sind %-Angaben eher geeignet.

Gruss

MrMurphy