Posizionamento blocchi [era: Aiuto con CSS]

[falampi]

Ciao a tutti.
E' da poco che sto studiando i css, quindi non me ne vogliate se dico castronerie...
vengo al sodo:
Avrei intenzione di realizzare un css per un layout che ho in mente.
niente di complicato... solo che non so come dividerlo correttamente!
mi spiego meglio..
ho definito il box principale così:

html, body { height: 100%; width:100%; }
.box { float:center; width:800px; margin:0 auto 0 auto; background-color:#3300CC; } 

(gli ho dato un colore di sfondo a tutti giusto x vedere come viene)
al suo interno ci voglio mettere:
1 box che fa da header
1 box che fa da footer
1 box laterale (elastico)
1 box centrale (elastico) che a sua volta ne contiene altri 4 (elastici pure loro)

quindi ho scritto:

.footer { float:left; width:782px; height:50px; background-color:#00FF00; }
.header {float:left; width:782px; height:230px; background-color:#CC3300; }
.main { float:center; width:782px; margin:0 auto 0 auto; background-color:#FF0099; } 

e qui mi blocco perchè:
non so dove mettere il box laterale da 250px (va specificato forse dove ho messo header e footer?)
non so come mettere i 4 box dentro il box centrale (che dovrebbe essere praticamente lo spazio restante tra il box laterale e il contenitore, quindi 782px-250px)


qualcuno sa spiegarmi gentilmente come dovrei fare?
sottolineo spiegarmi perchè vorrei "capire" come si fa.. non un copia e incolla che non imparo niente

grazie,
Fabrizio

[fcaldera]

Benvenuto nel forum

Prima di aprire nuovi thread leggi il regolamento in evidenza (attenzione ai titoli), grazie.

[Myaku]

Originariamente inviato da falampi
qualcuno sa spiegarmi gentilmente come dovrei fare?
sottolineo spiegarmi perchè vorrei "capire" come si fa.. non un copia e incolla che non imparo niente

a parte che "center" non mi risulta essere un valore ammesso per float
hai già provato a dare uno sguardo alla guida di base ai css che trovi qui su html.it, dove ti spiega l'utilizzo dei float e del clear? a tal proposito, fai una ricerca anche per fabclearing.
Anche uno sguardo agli esempi di layoutgala potrebbe esserti utile

[falampi]

no, layoutgala non l'avevo visto... interessante...
grazie mille e scusate x il titolo a.... coda di gatto!