In Firefox the page-break-after: always; directive is working fine. However, this same code is seemingly ignored by IE. To test, copy and paste the code into a new HTML document before saving and then testing the print preview. During print preview, I want the page-break-after directive to actually do what it says, like it does in Firefox.
The entire code below:
<html>
<head>
<style type="text/css">
body
{
margin: 0;
font-style: verdana;
font-size: 12px;
clear: both;
}
div.header
{
display: block;
}
div.header img
{
height: 160px;
display: block;
margin: 0 auto;
}
div.left
{
float: left;
width: 40%;
min-height: 550px
}
div.right
{
float: left;
width: 40%;
display: block;
margin-left: 40px;
min-height: 550px;
page-break-after: always;
}
div.last
{
min-height: 550px;
width: 100%;
display: block;
clear: both;
margin-bottom: 20px;
page-break-after: always;
}
div.images
{
}
div.images img
{
max-height: 240px;
margin: 10px;
display: block;
margin: 0 auto;
}
img.smaller
{
padding-bottom: 10px;
}
h3
{
font-weight: bold;
display: inline;
}
h3.blurb
{
display: block;
margin-bottom: 5px;
}
hr.line
{
}
span.blurb
{
display: block;
border: 1px solid #000;
padding: 2px;
word-wrap: break-word;
}
span.memories
{
}
span.activities
{
}
span.university
{
}
span.children
{
}
span.hobbies
{
}
span.volunteer
{
}
</style>
<!--[if IE]>
<style type="text/css">
div.left
{
height: expression( document.body.clientHeight > 550 ? "550px" : "auto" );
}
div.right
{
height: expression( document.body.clientHeight > 550 ? "550px" : "auto" );
}
div.images img
{
height: expression( document.body.clientHeight > 240 ? "240px" : "auto" );
}
img.smaller
{
display: block;
padding-bottom: 10px;
}
img
{
text-align: center;
}
</style>
<![endif]-->
</head>
<body>
<div class="header"><img src="https://www.google.com/images/srpr/logo3w.png" /></div>
<div class="left">
<h3>Name:</h3> Lorem ipsum dolor sit amet, consectetuer adipiscing eli
<hr class="line" />
<h3>Current Name:</h3> Lorem ipsum dolor sit amet, consectetuer adipiscing eli
<hr class="line" />
<h3>Address:</h3> 2345 Vivamus et Tellus Street
<hr class="line" />
<h3>Home Phone:</h3> 9096761212
<hr class="line" />
<h3>Cell Phone:</h3> 9096761212
<hr class="line" />
<h3>Email:</h3> lipsum@marius.com
<hr class="line" />
<h3>Employer/Retired:</h3> Lorem ipsum dolor sit amet, consectetuer adipiscing eli
<hr class="line" />
<h3>Job Title:</h3> Lorem ipsum dolor sit ame
<hr class="line" />
<h3>Are you planning to attend reunion?</h3> Yes
<hr class="line" />
<h3 class="blurb">Memories:</h3>
<span class="blurb memories">None provided</span>
<h3 class="blurb">Student Activities/Clubs:</h3>
<span class="blurb activities">None provided</span>
</div>
<div class="right" style="page-break-after: always;">
<h3>Major:</h3> Lorem ipsum dolor sit ame
<hr class="line" />
<h3>Spouse/partner name:</h3> Lorem ipsum dolor sit amet, consectetuer adipiscing eli
<hr class="line" />
<h3>Spouse/partner employer:</h3> Lorem ipsum dolor sit amet, consectetuer adipiscing eli
<hr class="line" />
<h3>Spouse/partner job title:</h3> Lorem ipsum dolor sit amet, consectetuer adipiscing eli
<hr class="line" />
<h3 class="blurb">Spouse/Partner University and Class Year:</h3>
<span class="blurb university">Lorem ipsum dolor sit amet, consectetuer adipiscing eli</span>
<h3 class="blurb">Children (list names/ages):</h3>
<span class="blurb children">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, Sed quis nunc, Aliquam</span>
<h3 class="blurb">Interests/Hobbies:</h3>
<span class="blurb hobbies">Lorem ipsum dolor</span>
<h3 class="blurb">Volunteer Work (include services):</h3>
<span class="blurb volunteer">None provided</span>
</div>
<div class="last" style="page-break-after: always;">
<h3 class="blurb">Life since</h3>
<span class="blurb life">None provided</span>
</div>
<div class="header"><img src="https://www.google.com/images/srpr/logo3w.png" /></div>
<div class="left">
<h3>Name:</h3> Lorem ipsum dolor sit amet, consectetuer adipiscing eli
<hr class="line" />
<h3>Current Name:</h3> Lorem ipsum
<hr class="line" />
<h3>Address:</h3> None provided
<hr class="line" />
<h3>Home Phone:</h3> None provided
<hr class="line" />
<h3>Cell Phone:</h3> None provided
<hr class="line" />
<h3>Email:</h3> None provided
<hr class="line" />
<h3>Employer/Retired:</h3> None provided
<hr class="line" />
<h3>Job Title:</h3> None provided
<hr class="line" />
<h3>Are you planning to attend reunion?</h3> Yes
<hr class="line" />
<h3 class="blurb">Memories:</h3>
<span class="blurb memories">None provided</span>
<h3 class="blurb">Student Activities/Clubs:</h3>
<span class="blurb activities">None provided</span>
</div>
<div class="right" style="page-break-after: always;">
<h3>Major:</h3> Lorem ipsum dolor sit ame
<hr class="line" />
<h3>Spouse/partner name:</h3> Lorem ipsum dolor sit amet, consectetuer adipiscing eli
<hr class="line" />
<h3>Spouse/partner employer:</h3> Lorem ipsum dolor sit amet, consectetuer adipiscing eli
<hr class="line" />
<h3>Spouse/partner job title:</h3> Lorem ipsum dolor sit amet, consectetuer adipiscing eli
<hr class="line" />
<h3 class="blurb">Spouse/Partner University and Class Year:</h3>
<span class="blurb university">Lorem ipsum dolor sit amet, consectetuer adipiscing eli</span>
<h3 class="blurb">Children (list names/ages):</h3>
<span class="blurb children">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, Sed quis nunc, Aliquam</span>
<h3 class="blurb">Interests/Hobbies:</h3>
<span class="blurb hobbies">Lorem ipsum dolor</span>
<h3 class="blurb">Volunteer Work (include services):</h3>
<span class="blurb volunteer">None provided</span>
</div>
<div class="last" style="page-break-after: always;">
<h3 class="blurb">Life since</h3>
<span class="blurb life">None provided</span>
</div>
</body>
</html>
Apologies for answering a question with a question, but could it be because the page-breaks are being applied on positioned elements?
MSDN clearly states that
http://msdn.microsoft.com/en-us/library/ms530842(v=vs.85).aspx