Using page break on a hidden div

Question

How can I get page-break-after to work on a div that I am showing as display:none with @media screen?

I want the image to only show when I print but also page break after it so the rest of the divs print onto the second page.

EXAMPLE

this is the result I'm getting:

Answer 1

In your current CSS you have:

@media screen { .image { display:none; } }

@media print { .image { break-after:always;} }

.one { width:200px; height:100px; background-color:#339999;}

Where you have:

     @media print { .image { break-after:always;} }

Try changing this to:

     @media print { .image { page-break-after:always;} }

Hope this works.