[CSS] Altezza in funzione di larghezza && Centrare elementi floattanti

Ciao a tutti, sto lavorando a scopo didattico ad una pagina molto semplice, dove ci sono diversi div vuoti colorati, tutti impostati su float:left. Ora, ecco il primo problema che ho riscontrato e che non so come risolvere:

Vorrei impostare solo tramite CSS una larghezza in percentuale, ma contemporaneamente mantenere la forma quadrata. Quindi mi chiedevo: è possibile legare in qualche modo l'altezza alla larghezza? Fare si che la larghezza si adatti allo schermo e l'altezza mantenga le proporzioni?

E l'altra cosa: Tutti questi div si dispongono da sinistra verso destra; come posso fare per farli disporre a partire dal centro (in linea, ma centrati, come se il div contenitore fosse della esatta grandezza per contenerli, ma posto in centro)?

Grazie a tutti per l'aiuto, spero in una soluzione!

Se un elemento è flottante non lo puoi centrare, usa piuttosto box di tipo inline-block (rimuovi il float ed imposta la proprietà display su inline-block), li potrai centrare come se fossero normali caratteri di un testo mediante la proprietà text-align.
Per quanto riguarda la questione proporzioni, è possibile ma non semplice. Ci potrebbero essere più soluzioni, ma senza vedere la pagina in questione non saprei indicarti la migliore.
Qua trovi qualche idea: http://stackoverflow.com/questions/1...ponsive-square.