I'm currently working on enhancing the print layout of my web pages using CSS. One issue I've encountered is figuring out how to properly handle page breaks. I have managed to avoid breaks in the middle of images and text blocks that should stay together, which is great. However, there's a specific scenario where a horizontal rule separates a new section with just its title (and possibly a brief description), leaving the rest of the section for the next page. This results in a confusing format as ideally, I would prefer the entire section to move to the next page if the title is too close to the bottom of the current one.
The HTML structure is quite simple, consisting of a horizontal rule, header, description paragraph, followed by the content of the section. I attempted to group the header and description within a division to prevent any page breaks inside or after it like this:
<a id="section_1"></a>
<div class="no-page-break">
<h2>Section 1</h2>
<p>Section 1 Description</p>
</div>
<div>
<!-- all the content for this section -->
</div>
<hr />
<a id="section_2"></a>
<div class="no-page-break">
<h2>Section 2</h2>
<p>Section 2 Description</p>
</div>
<div>
<!-- all the content for this section -->
</div>
<!-- and so on -->
.no-page-break { page-break-after: avoid; page-break-inside: avoid }
My expectation was to make each block unbreakable and shift them entirely to the next page, but unfortunately, it didn't work as intended. It's possible that I've been pondering over this problem for too long. Does anyone have suggestions on how to ensure that each section of my page stays intact without breaking up in such a manner?
Note: I don't want to enforce a break before every section, as that might lead to wasted space on some pages.
Bonus: If you know how to hide the horizontal rule if it gets split due to a page break, that would be a nice touch. But it's not a major concern at the moment.