6 div su 2 colonne

[ataru4ever]

Buongiorno a tutti!

Supponiamo di avere 6 div box consecutivi come i seguenti:

+---+
| 1 |
+---+
+---+
| 2 |
+---+
+---+
| 3 |
+---+
+---+
| 4 |
+---+
+---+
| 5 |
+---+
+---+
| 6 |
+---+

contenuti in un div contenitore (non l'ho disegnato ma c'è)

Volevo sapere se era possibile usando solo i CSS disporre i 6 div su due colonne mantenendo il seguente ordine:

+---+  +---+
| 1 |  | 4 |
+---+  +---+
+---+  +---+
| 2 |  | 5 |
+---+  +---+
+---+  +---+
| 3 |  | 6 |
+---+  +---+

Grazie per qualsiasi consiglio

[fedex05]

Allora fai così: metti 3 div (1,2,3) in un div contenitore (sx) e gli altri 3 div (4,5,6) in un altro div contenitore (dx), come qui sotto:

<div id='sx'>
<div id='1'>1</div>
<div id='2'>2</div>
<div id='3'>3</div>
</div>

<div id='dx'>
<div id='4'>4</div>
<div id='5'>5</div>
<div id='6'>6</div>
</div>

Poi con gli stili css assegni la proprietà float:left al div 'sx', in questo modo:

#sx {float:left;}

[ataru4ever]

L'uovo di colombo, grazie mille

Nel frattempo mi è venuta in mente un'altra domanda: se io volessi avere una serie di box in colonna contenuti in un div che viene ridimensionato con la pagina, che quando il contenitore non è più abbastanza alto da contenerli tutti scorrano all'inizio della seconda colonna, potrei farlo solo con i css?

Grazie ancora per l'aiuto ^^

+--------------+      +--------------+      +--------------+
|+---+         |      |+---+  +---+  |      |+---+  +---+  |
|| 1 |         |      || 1 |  | 4 |  |      || 1 |  | 3 |  |
|+---+         |      |+---+  +---+  |      |+---+  +---+  |
|+---+         |      |+---+         |      |+---+  +---+  |
|| 2 |         |      || 2 |         |      || 2 |  | 4 |  |
|+---+         |      |+---+         |      |+---+  +---+  |
|+---+         |      |+---+         |      |              |
|| 3 |         |      || 3 |         |      +--------------+
|+---+         |      |+---+         |
|+---+         |      |              |
|| 4 |         |      +--------------+  
|+---+         |             ^
|              |
+--------------+
        ^