Problema float

[metatad]

Ho un div contenitore (cont), nel quale stanno 'n' div (max 35); tutti questi div (classe box) hanno settato

float: left;

ed hanno tre possibili dimensioni, diversa l'una dall'altra. Ad es.:

.box_uno {
width: 100px;
height: 50px;
}.box_due {
width: 200px;
height: 100px;
}.box_tre {
width: 300px;
height: 150px;
}

Il div contenitore ha l'altezza con valore fisso

height: 500px;

A me serve che si allineino, all'interno del div cont, con un effetto masonry, ma senza utilizzare column!
Il problema è che, se al div cont attribuisco

width: auto;

, tutti i div contenuti si allineano su un unica riga in alto; se invece gli attribuisco

width: 1500px;

(dove 1500 è una quantità 'n', che approssimativamente consenta di contenerli tutti, ma non su una sola riga), capita che uno o più div finali sforino in altezza. Cioè non si posizionano restando all'interno del div contenitore, ma fuoriuscendo dai bordi di questo.
Nell'immagine allegata si vede meglio ciò che intendo; nell'angolo in basso a destra, si vede un div box (nr 12) che ha la stessa altezza del div box che gli sta sopra (stesso colore) ma che invece sta chiaramente per due/terzi fuori dal div cont.
C'è modo di risolvere?

[Mich_]

Potrebbe essere il "vecchio" problema del float senza il clear?

Ci sono vari articoli sull'argomento, forse il piu` completo tra quelli che ho trovato or-ora e` il terzo (vedi verso i 2/3 della pagina, dove si cita il clearfix

Fabclearing:
http://forum.html.it/forum/showthrea...readid=1000050

Float e clear:
http://www.html.it/pag/42450/float-e-clear/#

Float, clear e CLEARFIX:
http://lago72.altervista.org/css-le-...a-float-clear/

[metatad]

Thanx! :-)

[metatad]

In effetti, clearfix risolve ma all'incontrario... :-) Permette cioè che l'elemento contenitore si estenda sino ad adattarsi all'elemento contenuto, mentre ciò che servirebbe a me è l'esatto opposto, ovvero un elemento contenitore con dimensione fissa, al cui interno, e senza sforarne le dimensioni, si collocano gli elementi contenuti...

[Mich_]

Pero` se non ci sta, hai voglia a ficcarne dentro di piu` ...

In realta`, con il tipo di blocchi che hai tu, con dimensioni diverse, restano dei buchi che il browser da solo non e` in grado di colmare.

Quindi dovresti risolvere il problema dei buchi a livello di server (e spostare i blocchi di conseguenza in modo da farceli stare). In alternativa puoi lasciare i buchi e permettere al contenitore di allungarsi.

[metatad]

I buchi non sono un problema, va bene che ci siano. Però se imposto il width del contenitore come auto, mi mette i blocchi tutti su una sola riga... :-(
Mi sa che l'unica soluzione è quella che sto adottando, ovvero calcolare quali sono le possibili combinazioni con cui i blocchi non sforano, e poi utilizzarle in modo random...

[Mich_]

I buchi non sono un problema, va bene che ci siano. Però se imposto il width del contenitore come auto, mi mette i blocchi tutti su una sola riga... :-(

Questo e` chiaro. Capisco che sarebbe bello che il brwoser faccia tutto da solo, ma sarebbe "troppo" intelligente (e l'intelligenza dello strumento potrebbe essere controproducente.

Mi sa che l'unica soluzione è quella che sto adottando, ovvero calcolare quali sono le possibili combinazioni con cui i blocchi non sforano, e poi utilizzarle in modo random...

Probabilmente hai ragione. Pero` non in modo casuale, ma in modo ragionato, dove l'intelligenza la mette il server programmato da te (con i tuoi criteri, non quelli del sig. Google, o Mozilla, o altro costruttore).