HTML: Printing floating divs, grid layout

[deoboropk]

I need to print a html page with a lot of boxes which have the same width but may have different height.These boxes should be arranged so that there is as less as possible free space. Like a flexible grid layout.See: http://jsfiddle.net/Probot/drWTt/1/If you make your browser window smaller so that Box 6 gets into a new line, you can see that between Box1 and Box 6 is a lot of unused space.I found already some plugins for jQuery: http://masonry.desandro.com/ or http://isotope.metafizzy.co/These plugins are for displaying content on screen depending on screen size. So assigning each box an absolute position would break automatic arranging if for example a user has print margins for a specific paper size.But what I need is a solution to arrange those boxes for DIN-A4 paper size where different print margins may exist depending on users printer. Also different orientation settings (portrait, landscape) should be supported.Thanks for your help!Probot