* {
box-sizing: border-box;
}
.row {
display: flex;
}
/* Creating two equal columns that sit side by side */
.column {
flex: 50%;
padding: 10px;
}
div.row {
page-break-after: always;
}<body>
<div<div class="row">
<div class="column" >
<p><h2>101</h2>
<img src="http://dev.virtualearth.net/REST/v1/Imagery/Map/Road/33.64188,-84.50077/7?mapSize=500,500&pp=33.64188,-84.50077;21;1&pp=33.76768,-84.36031;;2&key=ArJkybJp6LvcJs7su6sKIQMBnwYngXlhGIjE5aWRApleSq6DkWzGNm5j80Lb-WZt">
<h6>YES/NO 1. x? </br>
YES/NO 2. x?</br>
YES/NO 3. x?</br>
YES/NO 4. x?</br>
YES/NO 5. x?</br>
YES/NO 6. x?</h6><h5>________________________________________________________________________</br>
Signature Date</br></h5>
<h5>________________________________________________________________________</br>
Signature Date,</br></h5>
<h5>________________________________________________________________________</br>
Signature Date</br></h5>
<h5>________________________________________________________________________</br>
Signature Date</br></h5></p>
</div>
<div class="column" style="width: 1000; align: top;" >
<p>
<table>
<tr><th>Stop Number</th><th>Address</th><th>Zip</th><th>Arrival</th>
<tr>
<td>0</td>
<td>11111</td>
<td>22222</td><td>2:30</td></tr>
<tr><td>1</td>
<td>11111</td>
<td>22222</td>
<td>4:00</td></tr>
</table>
</p>
</div>
</div>
<p style="page-break-after: always;"> </p>
<div class="row">
<div class="column" >
<p><h2>02</h2>
<img src="http://dev.virtualearth.net/REST/v1/Imagery/Map/Road/33.64188,-84.50077/7?mapSize=500,500&pp=33.64188,-84.50077;21;1&pp=33.76768,-84.36031;;2&key=ArJkybJp6LvcJs7su6sKIQMBnwYngXlhGIjE5aWRApleSq6DkWzGNm5j80Lb-WZt">
<h6>YES/NO 1. x? </br>
YES/NO 2. x?</br>
YES/NO 3. x?</br>
YES/NO 4. x?</br>
YES/NO 5. x?</br>
YES/NO 6. x?</h6><h5>________________________________________________________________________</br>
Signature Date</br></h5>
<h5>________________________________________________________________________</br>
Signature Date,</br></h5>
<h5>________________________________________________________________________</br>
Signature Date</br></h5>
<h5>________________________________________________________________________</br>
Signature Date</br></h5></p>
</div>
<div class="column" >
<p>
<table>
<tr><th>Stop Number</th><th>Address</th><th>Zip</th><th>Arrival</th>
<tr>
<td>0</td>
<td>11111</td>
<td>22222</td><td>2:30</td></tr>
<tr><td>1</td>
<td>11111</td>
<td>22222</td>
<td>4:00</td></tr>
</table>
</p>
</div>
</div>
<p style="page-break-after: always;"> </p>
</body>I have designed a webpage with dual columns and require a break after the first section to print the following two columns on a separate page. However, I am facing difficulty in implementing the page break, as both columns continue to appear sequentially without the desired break. The columns are visually satisfactory, but I specifically need the page separation. I have experimented with adding an empty div between the sections along with the corresponding CSS:
CSS
div.row {
page-break-after: always;
HTML
<div class="pagebreak"> </div>
In addition, I attempted
<p style="page-break-after: always;"> </p>
However, instead of achieving a break after the second column, it results in all four columns displayed on one page.
What crucial element am I overlooking?