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.

Answer 2

This is for other people watching this review.
The new css file, I deleted my download link so here it is:

.image { display:none;}

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

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