mPDF Manual – What Else Can I Do

Floating blocks

mPDF ≥ 3.0

The CSS property float is partially supported in mPDF, allowing block elements (p, div etc.) to be placed alongside one another. They can also be used to create “columns” that span more than one page.

float: right|left


  • Float only works properly if a width is set for the float
  • If no width is set, the width is set to the maximum available (full width, or less if floats already set)
  • A block element next to a float has the padding adjusted so that content fits in the remaining width.
  • Text next to float should wrap correctly, but backgrounds and borders will overlap and/or lie under the floats in a mess
  • Does not work if Columns are being used.
  • You cannot change the page margins/orientation etc. in middle of using floats
  • Float is only supported on block elements (i.e. not SPAN etc.)

margin-right can still be set for a float:right and vice-versa.


The CSS property clear can be set on any block element (p, div etc.), and also <hr> or <br> elements.

clear: right|left|both


<h4>CSS Float</h4>

    Some text to start with

    <div style="float: right; width: 28%;">
        This is text that is set to float:right.

    <div style="float: left; width: 54%;">
        This is text that is set to float:left.

    <div style="clear: both; margin: 0pt; padding: 0pt; "></div>

    This is text that follows the clear:both.

Fork me on GitHub