Eu tenho uma página com vários gráficos em um formato de grade da seguinte maneira:

[ ] [ ] [ ] [ ]
[ ] [ ] [ ] [ ]
[ ] [ ] [ ] [ ]
[ ] [ ] [ ] [ ]
[ ] [ ] [ ] [ ]

Cada gráfico é exibido em um wrapper comfloat:left e o div em que os gráficos estãooverflow: auto. Isso fornece o layout desejado, agrupando os gráficos na largura da tela.

O problema que tenho é que, no modo de impressão, isso apenas imprime uma página e perde o restante (também a primeira página está em branco). Eu li um pouco e entendo que a solução na maioria dos casos é aplicarfloat:none que resolve os problemas acima ... Mas perco o formato da grade e quero mais de uma coluna de gráficos na página impressa.

Como posso consertar isso?

Estou usando uma folha de estilos de impressão, mas aqui estão os estilos de tela:

.chartSpace  /* surrounds all charts */
{
    padding-top: 20px;
    width: auto;
    overflow: auto;
}

.chartWrapper /* wrapper for each chart */
{
    float: left;
    padding: 0 20px 0 0;
}