Problem with getting desired 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.

Appreciate any ideas how I can 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

I don´t know if you really need the float:left for other things, but you could try it with:

.chartWrapper / wrapper for each chart / { display: inline; padding: 0 20px 0 0; }

That would also position the div´s next to each other and it doesn´t do strange things to the flow of the document.

Answer 2

This is a problem I have battled with on a project and unfortunately I have found no straightforward answer. Jeroens answer didn't work for me as I was also displaying some caption text under each image hence I needed display:block behaviour. The approach I ended up taking is as follows:

• Firstly I made an assumption that the user will be printing on A4 paper in portrait mode. I included this in a message box on the page ('for best results please print in portrait mode...etc) which is hidden when printing.
• Secondly, you can still float your charts but you should insert a clearing div after each row. (I know this messes up the layout when printing in landscape mode hence my first point above).

[][][][]
------- clearing div
[][][][]
------- clearing div
[][][][]
etc...

• I also went one step further and inserted a page-breaking div after enough rows to fill an A4 page (how many depends on your image size).

I used the following styles for this:

div.pageBreak {
    page-break-after: always;
    visibility:hidden;
    height:1px !important;
    margin:0;
}

Finally, do lots of cross-browser testing! I found I had to make the images quite small for the same grid layout to fit on one page across the browsers. This is due to the differences in the default page margins that the different browsers employ.

Hope this helps.