Posizionare 3 div in base ai 3 div soprastanti

[neroko]

Ciao a tutti,

Vorrei chiedervi qualche suggerimento per affiancare tre div ma senza che l'altezza di ognuno di
questi influenzi la posizione dei tre div sottostanti. Non so se mi spiego...

In pratica al momento ho questa situazione:



E vorrei invece che i div fossero così posizionati:



Il codice che utilizzo è:

HTML:

<div class="miostile">
contenuti 1° div
</div>

<div class="miostile">
contenuti 2° div
</div>

<div class="miostile">
contenuti 3° div
</div>

<br clear="all" />



<div class="miostile">
contenuti 4° div
</div>

<div class="miostile">
contenuti 5° div
</div>

<div class="miostile">
contenuti 6° div
</div>

CSS:

.miostile {
width: 30%;
float: left;
text-align: center;
margin: 0 7px 10px 7px;
vertical-align: top;
padding: 1px;
}

Qualche consiglio?

[emnlmn]

L'unica idea che mi viene in mente e di usare 3 div ulteriori, in modo da creare delle colonne.
Solo che poi dovrai gestire differentemente la successione dei blocchi.

[neroko]

Grazie della risposta emnlmn

Si ci avevo pensato, però diventerebbe un pò macchinosa come soluzione, ovviamente non per quello che riguarda il CSS ma per la gestione dei DIV in base al contenuto. Cioè, per capirci meglio, questi blocchi dovrebbero essere posizionati in ordine alfabetico, in questo modo:

1° RIGA: DIV A - DIV B - DIV C
2° RIGA: DIV D - DIV E - DIV F
ecc ecc.

Se dovessi adottare la soluzione da te suggerita, dovrei fare invece:

1° RIGA: DIV A - DIV D - DIV G
2° RIGA: DIV B - DIV E - DIV H
2° RIGA: DIV C - DIV F - DIV I
ecc ecc.

Dovrei quindi cambiare il layout e forse sarebbe meno intuitivo dal punto di vista del visitatore.

Non so... se mi dite che questa è l'unica soluzione procedo in questo modo; però vorrei capire (anche per curiosità mia) se è possibile risolvere in altro modo.