L'altezza dei primi DIV float ostacola i float successivi

[stuz87]

Salve a tutti.
Vorrei inaugurare la mia presenza su questo foro con un quesito che mi sta facendo dannare.
Avevo erroneamente aperto un topic su XTML e HTML chiedendo di spostarlo qui ma non sono stato ascoltato.

Comunque:

Io ho una pagina html formata da HEADER+CONTENUTO+FOOTER.
Nel contenuto vanno inseriti dei moduli formati da DIV che andranno a comporre una griglia da 3 colonne.
Fin qui tutto bene. Il risultato è questo:



il codice applicato ai moduli div è il seguente:

.modulo{
 	margin		:0 0 18px 18px;
 	height		:280px;
	float		:left;
 	width		:450px;
}

Quindi sono moduli con dei margini che li separano l'uno dall'altro e FLOAT impostato a LEFT.
Il fatto è che tutto funziona finchè l'altezza dei DIV è sempre la stessa.
Infatti, qualora l'altezza dei div dovesse aumentare succede questa cosa qui:



Il primo DIV blocca il 4° al centro della pagina perchè lo incontra come ostacolo.

Il mio obiettivo dovrebbe essere una struttura ordinata in cui i div, oltre a tendere a sinistra tendano anche verso l'alto a prescindere dall'altezza dei div precedenti.
Quindi una cosa del genere:



L'ordine in verità non è importante, quello che conta è che la struttura sia ordinata.
L'unico vincolo è che i moduli nella versione finale del sito saranno creati da un ciclo ASP con contenuti dinamici ecc...quindi ho bisogno di capire come poter creare i DIV uno dopo l'altro facendoli ordinare automaticamente usando i CSS.

Spero che il problema vi sia chiaro. Inoltre chiedo in anticipo scusa per qualsiasi mia dimenticanza e se esisteva gia un topic che parlava della medesima questione. Il problema è che non sapevo cosa cercare di specifico, perchè ognuno poteva esprimere il problema in maniera diversa. (non sapevo nemmeno come chiamare il topic )
Spero di trovare una risposta perchè si tratta di una questione di lavoro anche abbastanza urgente.

Grazie a chiunque.

[stuz87]

up

[stuz87]

up2

[Mich_]

Non e` un problema con soluzione banale ...

Credo che le soluzioni ci siano, ma dipendano da come esattamente sono fatti i singoli blocchi.
Capisco che tu vorresti una soluzione unica, che prescinda dalla forma dei vari blocchi (sarebbe bello), ma non la vedrei.

Una possibilita` e` usare le colonne:

----------- ----------- 
|  1      | |  4      | 
|         | |         | 
|         | ----------- 
----------- ----------- 
|---------| |  5      | 
|  2      | |         | 
|         | ----------- 
----------- ecc.
----------- 
|  3      | 
|         | 
-----------

che obbligherebbe pero` il programma ASP a decidere dove far finire la colonna (contare il numero di blocchi e dopo il primo terzo e dopo il secondo terzo inserire un </div><div class="colonna>).

[stuz87]

Ciao mich, grazie per avermi risposto
Immaginavo che la soluzione non fosse di facile attuazione.

Per ora ho impostato un'altezza fissa per ogni div, trovando un compromesso che potesse andare bene per tutti i contenuti.
Purtroppo io di ASP non me ne intendo, la parte di programmazione la svolgono altre persone nella mia divisione.

Grazie comunque di tutto

Se qualcuno ha altre idee in merito però non disdegnerò di leggerle

[serdominik]

ho lo stesso identico problema solo che non posso dare un'altezza fissa ai div poichè possono essere di diverse altezze e non posso suddividerli per colonna...avete altre ideee? io ricordo che esisteva un plugin di jquery che faceva una sorta di esempio come la terza immagine fatemi sapere
Domenico