div float sinnvoll automatisch anordnen

[JoPhi]

Hallo Leute,
ich bastle gerade auf http://www.meetus.at/ ein anonymes, soziales Netzwerk. Nur bei der Anzeige bin ich gerade voll am Verzweifeln.

Abgesehen vom Submenü (Loginbox) sollte das Verhalten der floatenden Boxen wie in Abb.1 sein. Die Problemstellung, die damit gelöst werden soll, sind die unterschiedlichen Bildschirmauflösungen. Mal passen 2 Boxen nebeneinander, mal 4 oder sogar 5.

Abb.1:
-----------------------------------------------------
+++++++++++++++++-+++++++++++++++++-+++++++++++++++++
+---------------+-+---------------+-+---------------+
+---------------+-+---------------+-+---------------+
+---------------+-+---------------+-+---------------+
+---------------+-+---------------+-+++++++++++++++++
+---------------+-+++++++++++++++++------------------
+---------------+------------------------------------
+---------------+------------------------------------
+---------------+------------------------------------
+---------------+------------------------------------
+++++++++++++++++------------------------------------
-----------------------------------------------------
+++++++++++++++++-+++++++++++++++++-+++++++++++++++++
+---------------+-+---------------+-+---------------+
+---------------+-+---------------+-+---------------+
+---------------+-+---------------+-+---------------+
+---------------+-+---------------+-+++++++++++++++++
+---------------+-+++++++++++++++++------------------
+---------------+------------------------------------
+---------------+------------------------------------
+---------------+------------------------------------
+---------------+------------------------------------
+++++++++++++++++------------------------------------
-----------------------------------------------------

Soweit so gut. Das Problem ist nur, dass die Boxen unterschiedlich (dynamisch, je nach Inhalt) lange sind, und das Ergebnis durch den float eher so wie in Abb2. aussieht:

Abb2.
-----------------------------------------------------
+++++++++++++++++-+++++++++++++++++-+++++++++++++++++
+---------------+-+---------------+-+---------------+
+---------------+-+---------------+-+---------------+
+---------------+-+---------------+-+---------------+
+---------------+-+---------------+-+++++++++++++++++
+---------------+-+++++++++++++++++------------------
+---------------+------------------------------------
+---------------+-+++++++++++++++++-+++++++++++++++++
+---------------+-+---------------+-+---------------+
+---------------+-+---------------+-+---------------+
+++++++++++++++++-+---------------+-+---------------+
------------------+---------------+-+++++++++++++++++
------------------+---------------+------------------
------------------+---------------+-+++++++++++++++++
------------------+---------------+-+---------------+
------------------+---------------+-+---------------+
------------------+---------------+-+---------------+
------------------+++++++++++++++++-+++++++++++++++++
-----------------------------------------------------

Hmmm... was kann ich tun, damit die Boxen sich so verhalten, wie im Idealfall bei Abb1 oben?

Danke für die Tipps, ich bin mit meinem Latein grad voll am Ende :D
JoPhi

[Vinzenz Mai]

Hallo,

Hmmm... was kann ich tun, damit die Boxen sich so verhalten, wie im Idealfall bei Abb1 oben?

Du suchst

display: inline-block;

siehe Gunnars Artikel zu Deinem Problem.

Freundliche Grüße

Vinzenz

[JoPhi]

Danke,

Du suchst

display: inline-block;

Das benutze ich schon, aber das hilft nix :(

[Der Martin]

Hallo,

Du suchst
    display: inline-block;
Das benutze ich schon, aber das hilft nix :(

in Kombination mit float? Das widerspricht sich.

Ciao,
 Martin

[JoPhi]

in Kombination mit float? Das widerspricht sich.

Ciao,
Martin

Das war's!! Danke für den Hinweis, jetzt purzeln die Boxen genau so wie sie sollen!!!

RIIIEEESEN Merci, oft sieht man den Wald vor lauter Bäumen nicht!! Danke!!!

[JoPhi]

Noch eine Ergänzung:
Mir ist aufgefallen, dass das nur jene Bereiche betrifft, die auf den rechten Bildschirmrand prallen. Also ist die Box rechts kleiner als die links daneben, wird die Zeile nicht umgebrochen, sondern der Inhalt am vorherigen Schwestern-Element ausgerichtet.

Um die Frage zu konkretisieren: Kann man hier irgendwie dem float lernen, dass es sich nicht am Schwestern-Element ausrichten soll, damit der Eindruck entsteht, es würde eine neue Zeile beginnen?

Grüße
JoPhi

[Matthias Apsel]

Om nah hoo pez nyeetz, JoPhi!

Um die Frage zu konkretisieren: Kann man hier irgendwie dem float lernen, dass es sich nicht am Schwestern-Element ausrichten soll, damit der Eindruck entsteht, es würde eine neue Zeile beginnen?

Zuerst ein wenig deutsch: Man könnte den Schüler etwas lehren. SCNR

float im selfhtml-wiki

Vielleicht interessiert dich auch die JQuery-Lösung masonry

Matthias