CSS3 Page break for printing not breaking at random spots - html

Question

I have been trying to figure this out for awhile now and I have not been able to get this issue fixed. I am trying to figure out if this is a known issue or I am simply doing something wrong! :/
I am trying to get the page to break into a new page (when printing) on the last <h2> of the page. However it seems that it breaks after the first <h2> every time even though it shouldn't break until the last <h2> that fits on the page.
CSS Code:
#media print{
html, body {
width: 8.5in;
height: 11in;
margin: 0.5in;
}
h2:last-child {
page-break-after:always;
}
}
HTML CODE:
<meta charset="UTF-8" />
<title>Apple Bavarian Torte</title>
<script src="modernizr-1.5.js"></script>
<link href="dwbase.css" rel="stylesheet" />
<link href="dwlayout.css" rel="stylesheet" media="only screen"/>
<link href="dweffects.css" rel="stylesheet" media="only screen" />
<link href="dwprint.css" rel="stylesheet" media="only print" />
<header>
<div id="div1">
Recipes | Ingredients | Articles <br />
<input type="search" id="sbox" name="sfield" />
<input type="button" id="sbutton" value="Search" placeholder="search term" />
</div>
<div id="div2">
Password <br />
<input type="text" id="pwd" name="pwd" placeholder="password" />
<input type="button" id="lbutton" value="Log In" />
</div>
<div id="div3">
User Name <br />
<input type="text" id="user" name="user" placeholder="username" />
</div>
<h1>dessertWeb</h1>
<nav class="horizontal">
<ul>
<li>recipes</li>
<li>menus</li>
<li>holidays</li>
<li>market</li>
<li>shopping</li>
<li>columns</li>
<li>messages</li>
</ul>
</nav>
</header>
<section id="left">
<nav class="vertical">
<h1>Categories</h1>
<ul>
<li>Cakes</li>
<li>Candies</li>
<li>Chocolate</li>
<li>Cookies</li>
<li>Crisps</li>
<li>Crumbles</li>
<li>Custards</li>
<li>Frozen Treats</li>
<li>Gelatins</li>
<li>Liqueur Desserts</li>
<li>Marshmallows</li>
<li>Meringues</li>
<li>Mousse</li>
<li>Pies</li>
<li>Pralines</li>
<li>Sauces</li>
<li>Truffles</li>
</ul>
</nav>
<nav class="vertical">
<h1>Related Recipes</h1>
<ul>
<li>Apple Crisp</li>
<li>Apple Fingers</li>
<li>Apple Streudel</li>
<li>Cherry Torte</li>
<li>Fruit Pie</li>
<li>Parfait</li>
<li>Strawberry Torte</li>
</ul>
</nav>
</section>
<section id="center">
<article>
<hgroup>
<h1>Apple Bavarian Torte
<img src="star.png" alt="3 1/2 stars" />
<img src="star.png" alt="" />
<img src="star.png" alt=""" />
<img src="halfstar.png" alt="" />
</h1>
<h2>by Lemking</h2>
</hgroup>
<img id="dishimg" src="torte.jpg" alt="Torte image" width="250" />
<p>A classic European torte baked in a springform pan. Cream cheese,
sliced almonds, and apples make this the perfect holiday treat
(12 servings).
</p>
<p>Rate/Review | Review Page</p>
</article>
<aside>
<h1>Recipe Box</h1>
<ul>
<li>Add to Recipe Box</li>
<li>Add to Shopping List</li>
<li>Share Recipe</li>
<li>Add to Menu</li>
<li>Customize Recipe</li>
<li>Share/Email</li>
</ul>
</aside>
<h2>Ingredients</h2>
<ul>
<li>1/2 cup butter</li>
<li>1/3 cup white sugar</li>
<li>1/4 teaspoon vanilla extract</li>
<li>1 cup all-purpose flour</li>
<li>1 (8 ounce) package cream cheese</li>
<li>1/4 cup white sugar</li>
<li>1 egg</li>
<li>1/2 teaspoon vanilla extract</li>
<li>6 apples - peeled, cored, and sliced</li>
<li>1/3 cup white sugar</li>
<li>1/2 teaspoon ground cinnamon</li>
<li>1/4 cup sliced almonds</li>
</ul>
<h2>Directions</h2>
<ol>
<li>Preheat oven to 450° F (230° C).</li>
<li>Cream together butter, sugar, vanilla, and flour.</li>
<li>Press crust mixture into the flat bottom of a 9-inch springform pan.
Set aside.</li>
<li>In a medium bowl, blend cream cheese and sugar. Beat in egg and vanilla.
Pour cheese mixture over crust.</li>
<li>Toss apples with sugar and cinnamon. Spread apple
mixture over all.</li>
<li>Bake for 10 minutes. Reduce heat to 400° F (200° C) and continue
baking for 25 minutes.</li>
<li>Sprinkle almonds over top of torte. Continue baking until lightly browned.
Cool before removing from pan.</li>
</ol>
</section>
<section id="right">
<h1>Reviews</h1>
<blockquote>
<p>
<img src="star.png" alt="4 stars" /> <img src="star.png" alt="" />
<img src="star.png" alt="" /> <img src="star.png" alt="" />
</p>
<p>I loved the buttery taste of the crust which complements the apples
very nicely.</p>
<p>
— Reviewed on Sep. 22, 2014 by MMASON.
</p>
</blockquote>
<blockquote>
<p>
<img src="star.png" alt="2 stars" /> <img src="star.png" alt="" />
</p>
<p>Nothing special. I like the crust, but there was a little too much
of it for my taste, and I liked the filling but there was too little
of it. I thought the crunchy apples combined with the sliced almonds
detracted from the overall flavor.</p>
<p>
— Reviewed on Sep. 1, 2014 by GLENDACHEF.
</p>
</blockquote>
<blockquote>
<p>
<img src="star.png" alt="3 1/2 stars" /> <img src="star.png" alt="" />
<img src="star.png" alt="" /> <img src="halfstar.png" alt="" />
</p>
<p>Delicious!! I recommend microwaving the apples for 3 minutes
before baking, to soften them. Great dessert - I'll be making it again
for the holidays.</p>
<p>
— Reviewed on August 28, 2014 by BBABS.
</p>
</blockquote>
</section>
<footer>
dessertWeb © 2014 English (US)
<span>
About
Developers
Privacy
Terms
Help
</span>
</footer>

Answer 1

What you're looking for is "SECTION > H2:last-of-type", not "H2:last-child", because the OL after the H2 is the last child of their parent.

Answer 2

I had to specifically name the one due to myself not being able to grab the last < h2> so I used this code:
h2:nth-last-child(2) {
page-break-before:always;
}