Mpdf: Margins not working correctly on floated divs

Created on 9 Aug 2016 · 4Comments · Source: mpdf/mpdf

I am trying to generate a PDF from some simple html and css, which includes some divs floated next to each other in a line, but I am experiencing some issues.

On the generated PDF, margin-right appears to be completely ignored, but margin-left works as expected.

Top margins are displayed, but sometimes floated divs in a row are moved down to the level of the top margin of the div before them – creating a cascading or staggered effect. For some reason this issue only starts to happen after a div no longer fits on the first row, or an element before it has cleared the previous floats.

When displayed as HTML everything works as expected, with all floated divs in straight lines and both left and right margins included.

I'm using version 7 of mpdf but I don't think this is a new issue.

Here is some code to illustrate the problem.

<?php ob_start(); ?>
<style type="text/css">
body {
    font-size: 10pt;
}
.c1 {
    float: left;     
    background-color: #ffcc00; 
    height: 100px; 
    width: 21%; 
    margin-top: 2%; 
    margin-bottom: 2%; 
    margin-left: 2%; 
    margin-right: 2%; 
}
</style>
<?php $stylesheet = ob_get_contents(); ob_end_clean(); ob_start(); ?>
<body>

<div class="c1">t</div>
<div class="c1">e</div>
<div class="c1">s</div>
<div class="c1">t</div>

<div class="c1">t</div>
<div class="c1">e</div>
<div class="c1">s</div>
<div class="c1">t</div>

</body>
<?php $html = ob_get_contents(); ob_end_clean();

include("../frameworks/mpdf/mpdf.php");
$mpdf = new mPDF('utf-8','A4', 0, '', 21, 21, 14, 14, 0, 0); 
$mpdf->WriteHTML($stylesheet,1);
$mpdf->WriteHTML($html);
$mpdf->Output();
exit;
?>

Any suggestions for a workaround would be much appreciated.

bufix help wanted

Source