I have a simple HTML-structure and put it to dompdf to render a PDF file. When i have 2 columns (div) with display:inline-block and a width that both can stay together, both columns move upwards and overlap my headlines.
I test it with no css properties and the problem is still there.
<div class="page" style="width:100%;">
<h1>1. Headline one</h1>
<h2>second subline</h2>
<br>
<div style="display:inline-block;margin-right:3%;width:47.5%;">
<p style="display:block;margin-top:23px;margin-bottom:23px;">some text with no sense but very long. some text with no sense but very long. some text with no sense but very long.
some text with no sense but very long. some text with no sense but very long. some text with no sense but very long.
some text with no sense but very long. some text with no sense but very long. some text with no sense but very long.
some text with no sense but very long. some text with no sense but very long. some text with no sense but very long.
some text with no sense but very long. some text with no sense but very long. some text with no sense but very long.
some text with no sense but very long. some text with no sense but very long. some text with no sense but very long.
some text with no sense but very long. some text with no sense but very long. some text with no sense but very long.
some text with no sense but very long. some text with no sense but very long. some text with no sense but very long.
some text with no sense but very long. some text with no sense but very long. some text with no sense but very long.
some text with no sense but very long. some text with no sense but very long. some text with no sense but very long.
some text with no sense but very long. some text with no sense but very long. some text with no sense but very long. </p>
</div>
<div style="display:inline-block;margin-right:0%;width:47.5%;">
<p style="display:block;margin-top:23px;margin-bottom:23px;">some text</p>
</div>
<div style="page-break-before:always;"></div>
<div style="display:inline-block;margin-right:0%;width:47.5%;">
<p style="display:block;margin-top:23px;margin-bottom:23px;">some text with no sense but very long. some text with no sense but very long. some text with no sense but very long.
some text with no sense but very long. some text with no sense but very long. some text with no sense but very long.
some text with no sense but very long. some text with no sense but very long. some text with no sense but very long.
some text with no sense but very long. some text with no sense but very long. some text with no sense but very long.
some text with no sense but very long. some text with no sense but very long. some text with no sense but very long.
some text with no sense but very long. some text with no sense but very long. some text with no sense but very long.
some text with no sense but very long. some text with no sense but very long. some text with no sense but very long.
some text with no sense but very long. some text with no sense but very long. some text with no sense but very long.
some text with no sense but very long. some text with no sense but very long. some text with no sense but very long.
some text with no sense but very long. some text with no sense but very long. some text with no sense but very long.
some text with no sense but very long. some text with no sense but very long. some text with no sense but very long. </p>
</div>
<div style="display:inline-block;margin-right:0%;width:47.5%;">
<p style="display:block;margin-top:23px;margin-bottom:23px;">some text</p>
</div>
<div style="display:inline-block;margin-right:0%;width:47.5%;">
<br>more text
</div>
</div>```
PHP:
$dompdf = new Dompdf();
$options = $dompdf->getOptions();
$dompdf->getFontMetrics()->registerFont(
['family' => 'AdelleSans', 'style' => 'normal', 'weight' => '400'],
$fontDirectory . 'AdelleSans.ttf'
);
$dompdf->getFontMetrics()->registerFont(
['family' => 'AdelleSans', 'style' => 'normal', 'weight' => '600'],
$fontDirectory . 'AdelleSansBold.ttf'
);
$options->set('defaultFont', 'AdelleSans');
$options->set('isHtml5ParserEnabled', true);
$dompdf->loadHtml($html,'UTF-8');
$dompdf->setPaper('A4', 'landscape');
$dompdf->set_option('dpi',300);
$dompdf->set_option('isRemoteEnabled', true);
$dompdf->set_option('defaultMediaType', 'all');
$dompdf->set_option('isFontSubsettingEnabled', true);
$dompdf->render();
$output = $dompdf->output();
file_put_contents("test.pdf", $output);
$dompdf->stream("test.pdf", array("Attachment" => false));
My goal is to view both columns side by side but on the current y-state with no overlap of previous elements.