A totals block that never splits across a page break

Why this block is harder than it looks

The totals block is small, which is why people do not think about it, and it sits at the end of a table whose length is unknown, which is why it breaks. When the line items finish two thirds of the way down a page, the totals fit and everything is fine. When they finish four lines from the bottom, the subtotal lands on one page and the grand total on the next, and a document where the grand total sits alone on a page with no context above it is the worst-looking failure a printed invoice has. It is also the one people most often try to fix with a fixed footer, which makes it worse.

The decisions that make it work

Reasons rather than a description of the code. Each of these is a choice that has a wrong answer, and the wrong answer is usually the default.

• Wrap the whole block in one element and put break-inside: avoid on that element. That is the entire fix and it is one line.
• Add break-before: avoid to the grand-total row as a second line of defence, so that if the block is ever forced to split it splits above the subtotal rather than above the total.
• Keep it in the normal flow. A totals block positioned into a page margin box appears on every page, which is wrong on all of them except the last, and there is no way to say last page only in a stylesheet.
• Align the numbers to the same right edge as the amount column of the table above. If they do not line up, the reader's eye reports that something is wrong before they can say what.
• Give the grand total a rule above it or a change of weight rather than a background colour, because a background tint is the first thing to disappear when print backgrounds are off.
• Keep the currency symbol from moving: give it its own inline box with a fixed width, or the column goes ragged as soon as one figure crosses into another order of magnitude.

The fragment

Markup and the CSS it needs, and nothing else. It expects a document that already has a page rule and a base stylesheet, so paste it into one rather than opening it on its own.

<section class="totals">
  <div class="row"><span>Subtotal</span><span class="v">4,180.00</span></div>
  <div class="row"><span>VAT at 20%</span><span class="v">836.00</span></div>
  <div class="row grand"><span>Total due</span><span class="v">5,016.00</span></div>
</section>

<style>
  .totals {
    break-inside: avoid;        /* the whole point of the block */
    width: 42%;
    margin-left: auto;          /* right edge aligns with the amount column */
    margin-top: 12pt;
  }
  .totals .row {
    display: flex;
    justify-content: space-between;
    padding: 4pt 0;
  }
  .totals .grand {
    break-before: avoid;        /* if it must split, split higher up */
    border-top: 1pt solid currentColor;
    font-weight: 700;
    margin-top: 4pt;
    padding-top: 6pt;
  }
  .totals .v {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
</style>

What breaks when it is built the obvious way

Pinning the totals to the bottom of the page with position: fixed so they cannot break. In paged output a fixed element repeats on every page, so a forty-line invoice prints the grand total four times, once on each page, including three pages where the items above it are only part of the bill. It reads as four separate amounts owed.

How to prove it survived pagination

Add line items one at a time until the table ends within two rows of the bottom margin, then render. That is the case the block was built for and the only one that exercises it. If it survives, remove a row and try again, because the failure window is one row wide.

Where it sits in a finished document

This page is one block. The document it belongs to has a page rule, a base stylesheet, a header and everything else around it, and repeating all of that here would make thirty pages that say the same thing. The invoice template is a complete file with this block already in it, so take that and change the fragment rather than assembling one from parts. The property doing most of the work here is covered on its own page, with the support caveats that belong there rather than here.

Frequently asked

Other parts of a document

The blocks that sit next to this one, and one from the next group along so you are not sealed inside a single kind of problem.