Can I keep my headers 'attached' to my content when printing my webpage?

Question

I have a standard webpage, headers, sub headers and blocks of text, repeated down the page. Occasionally this page will be printed directly from the browser.

Obviously the web page needs to be split up to fit on however many pages are required.

The issue I'm having is, some of my sub headers are being left at the bottom of one page and the text is pushed down onto the next page.

Ideally, I would like the sub headers to 'follow' the text.

Anyone have any suggestions? Is this even an issue that can be addressed?

Using JavaScript or jQuery or some magic CSS3 perhaps?

<div id="mainContent">

    <div class="header"></div>
    <div class="subHeader"></div>
    <div class="text">
        //LOTS OF TEXT
    </div>

    <div class="subHeader"></div>
    <div class="text">
        //LOTS OF TEXT
    </div>

    <div class="subHeader"></div>
    <div class="text">
        //LOTS OF TEXT
    </div>

    <div class="header"></div>
    <div class="subHeader"></div>
    <div class="text">
        //LOTS OF TEXT
    </div>

    <div class="header"></div>
    <div class="subHeader"></div>
    <div class="text">
        //LOTS OF TEXT
    </div>

    <div class="subHeader"></div>
    <div class="text">
        //LOTS OF TEXT
    </div>

    <div class="subHeader"></div>
    <div class="text">
        //LOTS OF TEXT
    </div>

    <div class="subHeader"></div>
    <div class="text">
        //LOTS OF TEXT
    </div>

    <div class="header"></div>
    <div class="subHeader"></div>
    <div class="text">
        //LOTS OF TEXT
    </div>

</div>

Cheers!

Answer 1

Ideally you need to use a print stylesheet. This will let you change the CSS specifically for print.

There are various print specific CSS rules but you'd have to try them on a variety of browsers.

For example: page-break-after allows you to insert a page break after the element use use it on

http://www.w3schools.com/cssref/pr_print_pageba.asp