I have a website and on one page there is repeating information from a for loop that is made to print. The problem is that every item in the forloop is about 10 lines of text. When I go to print, the 10 lines of text will sometimes break between pages. I need them to stay together no matter what and I have tried "page-break-inside: avoid;" but I can't get it to work. It is somewhat irrelevant however because I need to make sure every page only has three blocks on it because 4 already overdose the margins. My plan is to loop through the blocks just fine and detect every third loop and add extra spacing below it to get it to go to the next page.
Question: How do I detect every third loop in my html forloop?
{% for post in filter.qs %}
{% if forloop.first %}
<div style="position:relative; top: -12px; left: -2px; margin-bottom: 180px;">
<div style="position:absolute;left:21.79px;top:435.49px" class="cls_0030"><span class="cls_0030">{%if post.department%} {{post.department}}{%endif%}</span></div>
<div style="position:absolute;left:248.82px;top:435.54px" class="cls_014"><span class="cls_014">Inspection #</span></div>
<div style="position:absolute;left:355.58px;top:435.52px" class="cls_013"><span class="cls_013">{{ post.count_building }}</span></div>
<div style="position:absolute;left:21.70px;top:453.54px" class="cls_014"><span class="cls_014">Inspection Date</span></div>
<div style="position:absolute;left:96.52px;top:453.52px" class="cls_013"><span class="cls_013">{%if post.date%}{{post.date}}{%endif%}</span></div>
<div style="position:absolute;left:248.82px;top:453.54px" class="cls_014"><span class="cls_014">Inspection Time</span></div>
<div style="position:absolute;left:338.10px;top:453.49px" class="cls_008"><span class="cls_008">{%if post.time%}{{post.time}}{%endif%}</span></div>
<div style="position:absolute;left:21.70px;top:471.54px" class="cls_014"><span class="cls_014">Floor(s)</span></div>
<div style="position:absolute;left:96.52px;top:471.51px" class="cls_008"><span class="cls_008">{%if post.floor%}{{post.floor}}{%endif%}</span></div>
<div style="position:absolute;left:21.70px;top:489.55px" class="cls_014"><span class="cls_014">Hazard Level</span></div><div style="position:absolute; left:84px;top:489.51px" class="cls_009"><span class="cls_009">{%if post.hazard_level%}{{post.hazard_level}}{%endif%}</span></div>
<div style="position:absolute;left:259.57px;top:489.45px" class="cls_017"><span class="cls_017">Special Hazard Assessment</span></div>
<div style="position:absolute;left:203.99px;top:491.07px" class="cls_021"><span class="cls_021">Priority</span></div>
<div style="position:absolute;left:236.97px;top:490.27px" class="cls_020"><span class="cls_020">{%if post.priority%}{{post.priority}}{%endif%}</span></div>
<div style="position:absolute;left:248.82px;top:501.55px" class="cls_018"><span class="cls_018">Asbestos</span></div><div class="check_asbestos"><div class="text_pos">Y</div></div>
<div style="position:absolute;left:321.57px;top:501.55px" class="cls_018"><span class="cls_018">Confined Space</span></div><div class="check_confined"><div class="text_pos">Y</div></div>
<div style="position:absolute;left:21.70px;top:507.58px" class="cls_014"><span class="cls_014">Concern</span></div>
<div style="position:absolute;left:87.54px;top:507.54px" class="cls_009"><span class="cls_009">{%if post.concern%}{{post.concern}}{%endif%}</span></div>
<div style="position:absolute;left:248.82px;top:513.55px" class="cls_018"><span class="cls_018">Fall Protectio</span></div><div class="check_fall"><div class="text_pos">Y</div></div>
<div style="position:absolute;left:321.57px;top:513.55px" class="cls_018"><span class="cls_018">LockOut/Tag/Ou</span></div><div class="check_log"><div class="text_pos">Y</div></div>
<div style="position:absolute;left:21.70px;top:525.59px" class="cls_014"><span class="cls_014">Element/Code</span></div>
<div style="position:absolute;left:87.54px;top:525.54px" class="cls_009"><span class="cls_009">{%if post.codes%}{{post.codes}}{%endif%}</span></div>
<!--<div style="position:absolute;left:248.82px;top:525.59px" class="cls_014"><span class="cls_014">Code</span></div>
<div style="position:absolute;left:278.80px;top:525.54px" class="cls_015"><span class="cls_015">105 CMR 410.551</span></div>-->
<div style="position:absolute;left:21.70px;top:543.60px" class="cls_014"><span class="cls_014">Corrective</span></div><div style="position:absolute;left:87.54px;top:543.69px" class="cls_016"><span class="cls_016"><textarea rows="2" cols="70" style="height: 26px; border: none; resize: none; outline: none; overflow-y: hidden; color:rgb(185,19,24)" type="textarea">{%if post.correction%}{{post.correction}}{%endif%}</textarea></span></div>
<div style="position:absolute;left:21.70px;top:557.71px" class="cls_014"><span class="cls_014">Action</span></div>
<div style="position:absolute;left:21.70px;top:576.63px" class="cls_014"><span class="cls_014">Repair Dept.</span></div>
<div style="position:absolute;left:239.83px;top:576.63px" class="cls_014"><span class="cls_014">WO Number</span></div>
<div style="position:absolute;left:21.70px;top:594.63px" class="cls_014"><span class="cls_014">WO Complet</span></div>
<div style="position:absolute;left:171.12px;top:594.63px" class="cls_014"><span class="cls_014">Assigned To:</span></div>
<div style="position:absolute;left:329.50px;top:594.63px" class="cls_014"><span class="cls_014">Hrs</span></div>
<!--<div style="position:absolute;left:543.16px;top:756.71px" class="cls_019"><span class="cls_019">Page 1 of 1</span></div>-->
{%if post.image%}<img class="img-size" src="{{ post.image.url }}"/>{% else %}<div class="filler"></div>{% endif %}
{% else %}
<div style="position:relative; left: -2px; margin-bottom: 10px;">
<div style="position:absolute;left:21.79px;top:435.49px" class="cls_0030"><span class="cls_0030">{%if post.department%} {{post.department}}{%endif%}</span></div>
<div style="position:absolute;left:248.82px;top:435.54px" class="cls_014"><span class="cls_014">Inspection #</span></div>
<div style="position:absolute;left:355.58px;top:435.52px" class="cls_013"><span class="cls_013">{{ post.count_building }}</span></div>
<div style="position:absolute;left:21.70px;top:453.54px" class="cls_014"><span class="cls_014">Inspection Date</span></div>
<div style="position:absolute;left:96.52px;top:453.52px" class="cls_013"><span class="cls_013">{%if post.date%}{{post.date}}{%endif%}</span></div>
<div style="position:absolute;left:248.82px;top:453.54px" class="cls_014"><span class="cls_014">Inspection Time</span></div>
<div style="position:absolute;left:338.10px;top:453.49px" class="cls_008"><span class="cls_008">{%if post.time%}{{post.time}}{%endif%}</span></div>
<div style="position:absolute;left:21.70px;top:471.54px" class="cls_014"><span class="cls_014">Floor(s)</span></div>
<div style="position:absolute;left:96.52px;top:471.51px" class="cls_008"><span class="cls_008">{%if post.floor%}{{post.floor}}{%endif%}</span></div>
<div style="position:absolute;left:21.70px;top:489.55px" class="cls_014"><span class="cls_014">Hazard Level</span></div><div style="position:absolute; left:84px;top:489.51px" class="cls_009"><span class="cls_009">{%if post.hazard_level%}{{post.hazard_level}}{%endif%}</span></div>
<div style="position:absolute;left:259.57px;top:489.45px" class="cls_017"><span class="cls_017">Special Hazard Assessment</span></div>
<div style="position:absolute;left:203.99px;top:491.07px" class="cls_021"><span class="cls_021">Priority</span></div>
<div style="position:absolute;left:236.97px;top:490.27px" class="cls_020"><span class="cls_020">{%if post.priority%}{{post.priority}}{%endif%}</span></div>
<div style="position:absolute;left:248.82px;top:501.55px" class="cls_018"><span class="cls_018">Asbestos</span></div><div class="check_asbestos"><div class="text_pos">Y</div></div>
<div style="position:absolute;left:321.57px;top:501.55px" class="cls_018"><span class="cls_018">Confined Space</span></div><div class="check_confined"><div class="text_pos">Y</div></div>
<div style="position:absolute;left:21.70px;top:507.58px" class="cls_014"><span class="cls_014">Concern</span></div>
<div style="position:absolute;left:87.54px;top:507.54px" class="cls_009"><span class="cls_009">{%if post.concern%}{{post.concern}}{%endif%}</span></div>
<div style="position:absolute;left:248.82px;top:513.55px" class="cls_018"><span class="cls_018">Fall Protectio</span></div><div class="check_fall"><div class="text_pos">Y</div></div>
<div style="position:absolute;left:321.57px;top:513.55px" class="cls_018"><span class="cls_018">LockOut/Tag/Ou</span></div><div class="check_log"><div class="text_pos">Y</div></div>
<div style="position:absolute;left:21.70px;top:525.59px" class="cls_014"><span class="cls_014">Element/Code</span></div>
<div style="position:absolute;left:87.54px;top:525.54px" class="cls_009"><span class="cls_009">{%if post.codes%}{{post.codes}}{%endif%}</span></div>
<!--<div style="position:absolute;left:248.82px;top:525.59px" class="cls_014"><span class="cls_014">Code</span></div>
<div style="position:absolute;left:278.80px;top:525.54px" class="cls_015"><span class="cls_015">105 CMR 410.551</span></div>-->
<div style="position:absolute;left:21.70px;top:543.60px" class="cls_014"><span class="cls_014">Corrective</span></div><div style="position:absolute;left:87.54px;top:543.69px" class="cls_016"><span class="cls_016"><textarea rows="2" cols="70" style="height: 27px; border: none; resize: none; outline: none; overflow-y: hidden; color:rgb(185,19,24)" type="textarea">{%if post.correction%}{{post.correction}}{%endif%}</textarea></span></div>
<div style="position:absolute;left:21.70px;top:557.71px" class="cls_014"><span class="cls_014">Action</span></div>
<div style="position:absolute;left:21.70px;top:576.63px" class="cls_014"><span class="cls_014">Repair Dept.</span></div>
<div style="position:absolute;left:239.83px;top:576.63px" class="cls_014"><span class="cls_014">WO Number</span></div>
<div style="position:absolute;left:21.70px;top:594.63px" class="cls_014"><span class="cls_014">WO Complet</span></div>
<div style="position:absolute;left:171.12px;top:594.63px" class="cls_014"><span class="cls_014">Assigned To:</span></div>
<div style="position:absolute;left:329.50px;top:594.63px" class="cls_014"><span class="cls_014">Hrs</span></div>
<!--<div style="position:absolute;left:543.16px;top:756.71px" class="cls_019"><span class="cls_019">Page 1 of 1</span></div>-->
{%if post.image%}<img class="img-size" src="{{ post.image.url }}"/>{% else %}<div class="filler"></div>{% endif %}
{% endif %}
<br>
<br>
<br>
<br>
<br>
<br>
</div>
{% endfor %}
You can use the divisibleby template filter
along with forloop.counter to detect every third loop
{% for post in filter.qs %}
{% if forloop.counter|divisibleby:"3" %}
Something every third loop
{% endif %}
{% endfor