Spalten layout mit container über 2 Zeilen

[hotzenplotz]

Hi,

ist es irgendwie möglich folgendes Layout mit divs hinzubekommen?

[sejuma]

Klar. Es sind verschiedene Lösungen denkbar.
Vielleicht am einfachsten:
Packe je eine Spalte (also die 3 bzw. zwei untereinander angeodneten Boxen) in einen div und gib diesem jeweils ein float: left sowie einen erforderlichen margin-right-Abstand.

[hotzenplotz]

hi,

ja ansich ist das mit Spalten gut lösbar - allerdings ist das hier dynamischer Content der sozusagen von links nach rechts gerendert wird. Jedes 'Kästchen' hat einen left-float, nur bei dem orangefarbenen funktioniert das ja nicht, weil die nachfolgenden sich von der Höher her erst danach anordnen. Was mich interessiert ist, ob es irgendwie möglich ist, erst die blauen Kästchen zu setzen, danach das orangene nachträglich zu positionieren, so dass die blauen sich drum herum anordnen?

[sejuma]

So? (nur im IE 7 getestet)

Code: Alles auswählen

<div style=" width: 320px; padding: 5px; border: 1px solid #000;">

<div style="float: left; width: 100px; height: 100px; margin-right: 5px; margin-bottom: 5px;  background: blue; border: 1px solid red;">BlaueBox</div>
<div style="float: left; width: 100px; height: 100px; margin-right: 5px; margin-bottom: 5px;  background: blue; border: 1px solid red;">BlaueBox</div>
<div style="float: left; width: 100px; height: 100px; margin-right: 5px; margin-bottom: 5px;  background: blue; border: 1px solid red;">BlaueBox</div>
<div style="float: right;  width: 100px; height: 210px; background: orange; border: 1px solid green;>Orangebox</div>
<div style="float: left; width: 100px; height: 100px; margin-right: 5px; margin-bottom: 5px;  background: blue; border: 1px solid red;">BlaueBox</div>
<div style="float: left; width: 100px; height: 100px; margin-right: 5px; margin-bottom: 5px;  background: blue; border: 1px solid red;">BlaueBox</div>
<div style="float: left; width: 100px; height: 100px; margin-right: 5px; margin-bottom: 5px;  background: blue; border: 1px solid red;">BlaueBox</div>
<div style="float: left; width: 100px; height: 100px; margin-right: 5px; margin-bottom: 5px;  background: blue; border: 1px solid red;">BlaueBox</div>
<div style="float: left; width: 100px; height: 100px; margin-right: 5px; margin-bottom: 5px;  background: blue; border: 1px solid red;">BlaueBox</div>
</div>