How do I avoid a page break immediately after a heading

Question

I have an HTML 4.01/CSS 2.1 document that includes an H3 heading followed by a short (one line) paragraph block and then an unordered list with several items:

&l         


        

Answer 1

This is an extremely hacky solution, but it works for me:

h1 {
    page-break-inside: avoid;
}
h1::after {
    content: "";
    display: block;
    height: 100px;
    margin-bottom: -100px;
}

Basically I create an invisible element that increases the size of the

without affecting the content after it. When page-break-inside: avoid is applied and the whole

(including the hacky element cannot fit into the page) the browser is forced to carry the

to the next page.