Layout "strano"

[RyRy]

Salve a tutti!! questo è il mio primo messaggio, premetto che ho da poco iniziato a studiare i CSS, sono alle prime armi ma grazie alle guide presenti nel sito comincio finalmente a capirci qualcosa.
Adesso, ho cominciato a muovere i primi passi nella creazione di layout personali, layout semplici mi riescono senza fatica ma adesso mi sono messo in testa di realizzare un layout "strano", composto da più colonne o meglio "Quadrati e rettangoli irregolari" che formano una sorta di "scacchiera", sostanzialmente composti da più colonne, una tabella insomma che però vorrei realizzare solo tramite i div.
di sotto inserisco l'immagine della mia idea






-Utilizzando le proprietà float (left), riesco ad allineare i div senza problemi fino alla seconda riga dopodichè cominciano i casini...
-Utilizzando invece le proprietà di posizionamento assoluto (per il container) e relativo (per tutte le alte colonne) praticamente non succede niente... o se succede non è come dovrebbe...
-Devo utilizzare immagini di sfondo per le colonne? l'unico problema e che ogni div, secondo la mia idea di base dovrà poi contenere uno sfondo (un immagine) differente... insomma spero di essere stato chiaro...

sostanzialmente vi chiedo
è possibile realizzare una cosa del genere?? oppure devo per forza utilizzare le tabelle?

vi ringrazio anticipatamente delle risposte.
grazie.

[Mich_]

Comincio a rispondere partendo dalla frase:

oppure devo per forza utilizzare le tabelle?

la risposta DEVE partire dalla SEMANTCA, cioe` dal significato che vuoi trasmettere.
Se parti dal layout, chi/cosa non reisce a "vedere" il tuo layout non capira` nulla. E non sono solo le persone cieche che non vedono. Neanche i motori di ricerca vedono, e se non vedono non indicizzano correttamente; e nel Web semantico se le cose non sono semanticamente corrette la tua pagina sara` penalizzata.

Quindi se il significato dei tuoi blocchi ha relazione di riga e di colonna, DEVI usare le tabelle; se viceversa tale relazione non c'e`, allora NON DEVI usare tabelle.

---
Per rispondere ora piu` direttamente alla domanda:

è possibile realizzare una cosa del genere?

La risposta e` si`, e` possibile.

Sottintesa c'e` poi la domanda: "Come si fa?"
A questo non so rispondere immediatamente, dato che non conosco la relazione tra i blocchi.
Potrebbe esserci una relazione "in verticale" (cioe` tra i blocchi 1, 5, 9; poi 2, 6, 10; ...), nel qual caso e` opportuno racchiudere i blocchi di ciascuna colonna in contenitori di colonna; oppure viceversa e` una relazione "orizzontale" e richiede blocchi di riga.

Alla fine resta il caso blocchi assolutamente slegati: potrebbero pero` essere una lista (unica) che per motivi di spazio vengono presentati su piu` righe: allora devi usare i tag <ul> e[*].

Se anche la lista non corrisponde alla semantica, nonti resta che fare come hai detto. Non dovrebbe esserci l'errore che segnali, ma forse ti sei dimenticato di definire l'altezza dei blocchi: altezza che puoi esprimere in varie unita` di misura: se i blocchi contengono prevalentemente scritte, l'unita` corretta sono gli em; se contengono oggetti fissi (immagini) la misura corretta sono i px; se devono stare comunque 4 in una riga devi usare le %.


Nota: i posizionamenti asosluti, lasciali a quando avrai capito come funzionano: usarli e` molto difficile, e rischi sempre di avere sovrapposizioni di blocchi, che "saltano fuori" quando meno te l'aspetti (e ci fai una figuraccia).

[RyRy]

ti ringrazio molto delle spiegazioni, proverò a fare come mi hai detto, grazie ancora.