When should the CSS properties page-break-after: always or before be used? I have tried various methods, such as creating different div elements for page-break, adjusting float and clear:both, but have not had any success.
There are currently four sections on one page. My goal is to insert a page break after every two sections when printing, however, this does not seem to be working and all sections are still displayed at once. While adding margin-bottom could serve as a workaround, it would be preferable if the page-break functionality worked.
$(document).on('click','#ptn',function(){
window.print();
})@media print {
body *{
visibility: hidden;
}
#pay_btn{
display: none;
}
#printDiv, #printDiv * {
visibility: visible;
}
#printDiv {
width: 297mm;
height: 210mm;
position: absolute;
left:0;
bottom:0;
top:0;
right:0;
}
section:nth-child(even) {
page-break-after: always;
background:black;
}
}
#printDiv section{
width:22%;
margin-right:5px;
height:70mm;
float:left;
border:2px solid red;
margin-bottom:20px;
}<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class='col100 txtright'><button id='ptn'>Print</button></div>
<div id='printDiv'>
<section></section>
<section></section>
<section></section>
<section></section>
</div>
</body>
</html>