DocRaptor customer is having trouble figuring out why a page break is occurring, and it's got me stumped. I've found some workarounds, but would like a more technical breakdown. Things that worked:
1) dropping the images inside <p> elements
2) setting a width on the body that is 550-600px

The questions:
Why is the element with id "assessment-title" not on the first page?
Why is the element with id "assessment-context" not on the first page?

Attached some HTML demonstrating the issue and the output PDF in Prince 10.

Would love to know what is going on here.

1. page-break-issue.html‎ 1.9 kB ‎
   HTML input
2. page-break-issue.pdf‎ 232.7 kB ‎
   Prince 10 Output

I think the issue is because img is set to display: inline-block in the user agent stylesheet, and in your markup both images are in the same block. Setting display: block on img fixed it for me.

Mike will undoubtedly have a better explanation.

Thanks for the answer, @dauwhe. That worked perfectly.

hmm, how this affect H1 element? why it also not on the first page?

Try specifying "h1 { page-break-after: auto }" to override the default setting which will try to avoid page breaks immediately after a heading.