I'm using floats to position 2 divs beside each other.
<a href="printbox.php">print</a>
<?php ob_start(); ?>
<style>
#sidedish{
float: left;
border: 1px solid black;
width: 100px;
height: 100px;
}
#maindish{
float: right;
width: 200px;
border: 1px solid black;
height: 100px;
text-align: center;
}
#container{
width: 304px;
height: 100px;
border: 1px solid black;
}
</style>
<div id="container">
<div id="sidedish"></div>
<div id="maindish"><div id="box">name</div></div>
</div>
<?php $_SESSION['boxes'] = ob_get_contents(); ?>
Here is what printbox do, it just renders the buffered data into a pdf, but somehow the floats that were set were lost in the process.
<?php require_once('html2pdf/html2pdf.class.php'); ?>
<?php
$html2pdf = new HTML2PDF('P', 'A4', 'en', true, 'UTF-8', array(0, 0, 0, 0));
$html2pdf->writeHTML($_SESSION['boxes']);
$html2pdf->Output('random.pdf');
?>
It works fine on html:
but when I click on print it turns to this:
Any idea what the problem is?
Speaking from personal experiences, I would say styling the output of HTML2PDF
is, at best, esoteric black magic science. The main reasons for this are:
To be fair, this is not only the issue for HTML2PDF
but also for the TCPDF
that HTML2PDF
uses.
It might be possible that HTML2PDF
, being just an almost-zero-setup, quick & easy alternative interface for the TCPDF
, cuts more CSS support off — but I'm sure that even TCPDF
wouldn't support float
properly.
The best workaround that you could use is to send your floating divs to the nineties:
<table>
<tr>
<td><div class="float"> ... </div></td>
<td><div class="float"> ... </div></td>
</tr>
</table>
You could also hide this embarrassment from the public HTML:
<?php
$isPdf = (/* condition that tells us we're outputting PDF */) ? true : false;
if ($isPdf) {
echo "<table><tr><td>";
}
?>
<div class="float"> ... </div>
<?php
if ($isPdf) {
echo "</td><td>";
}
?>
<div class="float"> ... </div>
<?php
if ($isPdf) {
echo "</td></tr></table>";
}
?>