How to float HTML to PDF content to the top or bottom of a page Documentation

CSS Paged Media-based page and column floats go far beyond the CSS2-based left or right floats you're probably used to. Page floats enable the creative layouts you find in print magazines and finely designed books. While the emergence of CSS Flexbox and CSS Grid has overshadowed floats as a layout technique, they remain ideally suited for dynamically generated, text-centric content of printed material and ebooks.

Only DocRaptor's HTML to PDF API lets you access page floats, thanks to Prince's support of the CSS Paged Media specifications. The travel magazine sample on DocRaptor's showcase demonstrates the distinct features of page and column floats, whereas this guide describes how to implement CSS page floats.

Left & Right Floating

First, let's recap the basic float functionality from the CSS2 specifications. Floats push an element to the light or right, allowing content to wrap around it.

.callout { 
  float: left;
}

Clearing

You can also clear content to force content below previously floated elements. With PDF documents, clearing is typically used to prevent floated elements from stacking next to each other.

.callout {
  float: left;
  clear: left;
}

Top & Bottom Floating

DocRaptor extends ordinary CSS and also lets you float elements to the top and bottom of pages or columns:

.callout {
  float: top;
  /* or */
  float: bottom;
}

Snap to Edge Floating

You can also "snap" an element to the nearest top or bottom edge:

.callout { 
  float: snap;
}

Margin Alternation

If you want to have different margins when an element is floated to the top or bottom, use the margin-alt property:

.callout {
  float: snap; 
  margin: 1em 0;
  margin-alt: 0; 
}

Inside & Outside Floating

Similar to left and right float, inside and outside floating is designed for printed material with dynamic content. If you don't know in advance if the floated element will be on the left or right page, you can combine inside and outside floating with @page pseudo-classes and push content to your preferred edge:

.callout { 
  float: outside;
}

Negative Margins

The margin-inside and margin-outside properties can be used alongside inside/outside floating to pull content into the margin area of the page:

.callout {
  float: outside;
  margin-outisde: -100px;
  margin-inside: 10px;
}

Deferring Floats

If you prefer that a particular element be floated only on a left or right side page, use the float-defer-page property:

.callout { 
  float: top;
  float-defer-page: right; 
}

You can also use float-defer-column to float objects to an inside or outside column.

Multi-Page Spreads

A spread is when an element, such as a photo, headline, or callout section, is "spread" across two different pages. You may have seen this a thousand times in magazines or newspapers but haven't considered until now how difficult it is to accomplish with typical CSS.

CSS Paged Media doesn't support directly support spreads, but it makes spreads easy to implement. The trick is to duplicate the element and defer one element on the left page and defer the duplicated element to the right page. Then, use negative margins to pull each element halfway off the page, like so:

.spread {
  width: 500px;
  float: top; 
  float-defer-page: left;
  float-defer-column: inside; 
} 

.spread:nth-of-type(2) {
  margin-inside: -250px;
  float-defer-page: right;
}

Additional Properties & Examples

We recommend Håkon Wium Lie's Guide to Page & Column Floats for even more page float CSS properties and detailed examples. He's the inventor of CSS (!!!), the board chairman for Prince, and a driving force behind expanding CSS into paged media. His illustrated guide dives deep into how floating can be used to create almost any print layout, including responsive layouts.

How to float HTML to PDF content to the top or bottom of a page