A signature block that never lands alone on the last page

Why this block is harder than it looks

The failure mode is famous and specific: a page break falls just before the signature block, so the last page of the agreement contains nothing but two lines and two names. A signature page with no operative text above it is the thing lawyers ask you to fix, because a page carrying a signature and no terms is exactly what a signature page must not be. The layout is otherwise easy, which is why the break rule is the whole content of this page.

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.

• Put break-inside: avoid on the block and break-before: avoid on it as well, so it is pulled back to sit with the paragraph above rather than pushed forward alone.
• Keep at least one substantive paragraph with it. The reliable way is to wrap the closing paragraph and the signature block together in one element with break-inside: avoid.
• Draw the signing line as a border on an empty box of a fixed height, not as a row of underscores. Underscores vary in width by font and break at unpredictable points.
• Leave real room to sign: 12mm of clear height above the line is the practical minimum, and people sign larger than you think.
• Print the name and title below the line rather than above it, so the signature does not land on top of them.
• Where two parties sign, use a grid and not floats, and keep both blocks in the same avoid container so they cannot be separated from each other either.

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.

<div class="signing">
  <p class="closing">Signed for and on behalf of the parties on the date
    written above.</p>

  <div class="sigs">
    <div class="sig">
      <div class="rule"></div>
      <p class="who">Elin Wynne</p>
      <p class="role">Director, Wynne and Hall Ltd</p>
    </div>
    <div class="sig">
      <div class="rule"></div>
      <p class="who">Date</p>
    </div>
  </div>
</div>

<style>
  .signing { break-inside: avoid; margin-top: 18pt; }  /* closing text travels with it */
  .sigs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16mm;
    margin-top: 14pt;
  }
  .sig .rule {
    height: 14mm;                       /* room to actually sign */
    border-bottom: 0.75pt solid currentColor;
  }
  .sig .who  { margin: 4pt 0 0; font-weight: 600; font-size: 9.5pt; }
  .sig .role { margin: 1pt 0 0; font-size: 8.5pt; color: #555; }
</style>

What breaks when it is built the obvious way

Putting break-inside: avoid on the signature block alone. It keeps the block together and does nothing to keep it with the agreement, so you still get a final page containing two signing lines and white space. The avoid has to wrap the closing text as well.

How to prove it survived pagination

Adjust the body text until the block sits within about 30mm of the bottom margin and render. The whole thing, closing paragraph included, should move to the next page together. Then make the document one line shorter and check again, because this is a boundary bug and boundaries are one line 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 services agreement 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.