Ciao a tutti

Dovrei ottenere questo: 6 quadrati che si ridimensionano a seconda della dimensione del browser, 3 per riga se il browser è orizzontale, 2 per riga se è verticale. Il tutto centrato orizzontalmente e verticalmente.
Al momento il risultato è questo: http://www.lpbs.eu/_index.html
Purtroppo di Javascript ci capisco molto poco: per realizzare questo mi hanno aiutato, ma ora non so come proseguire e come risolvere i problemi, che sono 2:

1) il ridimensionamento non funziona benissimo: a volte i quadrati non si posizionano correttamente (provate a ridimensionare il browser in verticale, in modo che risultino 2 quadrati per riga e poi a rimetterlo a tutto schermo: i quadrati si posizionano in modo scorretto, 2 nella prima riga, uno nella seconda e così via), suppongo per problemi di arrotondamento nel calcolo della dimensione del div #container

2) anche il testo contenuto nei quadrati si dovrebbe ridimensionare. Ho provato a usare questo script http://fittextjs.com/ che da solo funziona (http://www.lpbs.eu/test.htm) ma non sono riuscita a integrarlo con i quadrati

Qualcuno può aiutarmi?