float als spalte umbrechen

[zepho]

Hallo Community,

Der Titel mag etwas unglücklich formuliert sein, seht es mir bitte nach.

Mein Problem:

Auf der alten Browsershots.org-Site habe ich gesehen, dass dort verschieden hohe Elemente nach Höhe umgebrochen werden. (Die Seite, wo man alle aktuellen Aufträge sehen konnte). Leider wird die Seite gerade umgebaut, und daher ist das "nachbasteln" schwer, zumal ich mir auch nicht vorstellen kann, wie die das gemacht haben.

Sprich das Element wird erst gefloatet, wenn es von seiner Höhe nicht mehr in das Eltern-element passt.
Das Elemente rutscht dann scheinbar in die nächste "Spalte".

Anbei eine Grafik, ich hoffe ich kann mich so besser ausdrücken.

Mir fehlt der zündende Gedanke, könnt ihr mir bitte einen Schubs gegeben?

 

[Maik]

Moin,

die Boxen mit den Previews werden nicht spaltenweise, sondern zeilenweise ausgegeben, und so beim Erreichen des Zeilenendes in die nächste Zeile umgebrochen:

<div class="preview" style="width:80px;height:117px;float:left">
    ...
    <div class="caption" style="padding-top:95px">Firefox 2.0.0.4<br />Windows 2000</div>
</div>
<div class="preview" style="width:80px;height:117px;float:left">
    ...
    <div class="caption" style="padding-top:95px">Firefox 1.5<br />Windows 2000</div>
</div>
<div class="preview" style="width:80px;height:117px;float:left">
    ...
    <div class="caption" style="padding-top:60px">Konqueror 3.5<br />Debian Testing</div>
</div>

Und wenn ich mich nicht täusche, ist dies in der Vergangenheit auch schon so geschehen.

Ansonsten müssten, wie in deiner Skizze illustriert, die Inhalte mittels Scriptunterstützung auf die Spaltenblöcke verteilt werden, denn mit CSS ist das so nicht möglich.

mfg Maik

 

[zepho]

Danke für deine Antwort.

Die seite wie in deinem Screenshot meine ich nicht. In der neuen Version ist die noch nicht online. Ich meinte, wo man von allen Nutzern die Auträge sieht.

Vielleicht ist es kein verticales Float, ABER....

Auf der seite waren screenshots von verschieden langen Sites. Diese waren ja scheinbar in einer Spalte, zumindest im Firefox betrachtet.

[Arbeitspause...]

BUH-JA!

Zwar nicht mehr verlinkt, aber die Seite gibts noch (waybackmaschine sei dank):
http://browsershots.org/screenshots/

So, jetzt kann ich selber analysieren, aber ich hoffe du kannst jetzt meinen Gedanken nachvollziehen, die Seite sieht stark danach aus, als ob die Spalten umbrechen würden.

Trotzdem vielen Dank

 

[Maik]

In diesem Fall floaten die Boxen .preview nicht, sondern werden in der Mutterbox .previews mit entsprechenden Positionsangaben angeordnet:

<div class="previews" style="height:756px">
    <div class="preview" style="width:80px;height:154px;left:0px;top:0px;position:absolute">
        ...
    </div>
    <div class="preview" style="width:80px;height:76px;left:92px;top:0px;position:absolute">
        ...
    </div>
    <div class="preview" style="width:80px;height:60px;left:184px;top:0px;position:absolute">
        ...
    </div>
    ...
</div>

Ab der zweiten Zeile beginnen dann auch "spaltenweise" die top-Werte der Boxen zu variieren, je nachdem, wie hoch hier die Boxen in den Zeilen zuvor sind.

mfg Maik

 

[zepho]

ja, jetzt wo ich die Seite wieder gefunden habe, konnte ich das natürlich auch sehen. aber du musst zugeben, ohne den quellcode zu sehen, meint man es wäre vertikale floats

Trotzdem danke

 

[Maik]

aber du musst zugeben, ohne den quellcode zu sehen, meint man es wäre vertikale floats

... im Volksmund auch als "Optische Täuschung" bekannt

lg Maik