How can I fix this print layout with Float (in print stylesheet)?

Question

I have a page with multiple charts in a grid-like format as follows:

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

Each chart is displayed in a wrapper with float:left and the div the charts are in has overflow: auto. This gives the desired layout wrapping the charts to screen width.

The problem I have is that in print mode this only prints one page and loses the rest (also first page is blank). I have read a little bit and understand the solution in most cases is to turn apply float:none which solves the above problems... But I lose the grid format and I want more than one column of charts on the printed page.

How can I fix this?

I am using a print style sheet but here are the screen styles:

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

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

Answer 1

Float does not work well in print css, so remove the floats or override them with float: none and use inline-block instead:

.chartWrapper {
    float: none;
    display: inline-block;
    vertical-align: top;
    padding: 0 20px 0 0;
}