title: alignment disturbs while converting html to pdf using mPDF in php
body: <p>I am trying to convert HTML to PDF using mPDF but alignment disturbs while doing this.</p>
  
  <p>My HTML generates for this using </p>
  
  <pre><code>highlight_string($html);
  </code></pre>
  
  <p>is like below:</p>
  
  <pre><code>    "&lt;body style="height:11in;width:8.5in;"&gt;
  &lt;table style='margin-left:0.25in;margin-right:0.25in;margin-bottom:in;margin-top:1in;'&gt;
  &lt;tr&gt;
  &lt;td&gt;
  &lt;div style="background:#9abdd6;margin-left:0.25in;margin-right:0.25in;margin-bottom:in;margin-top:1in; height:3in;width:4in; position: relative;  float:left; "&gt;
  &lt;div style="height:3in; width:4in;background:#9abdd6"&gt;
  &lt;/div&gt;
  &lt;div style ="position:absolute;float:left;left:99px;background:;top:204px;width:auto;height:auto;color:gray;scaleX:0.51px;scaleY:1px;opacity:1px;font-size:;font-weight:;font-family:;text-align:"&gt;
  &lt;div style="left:99px;top:204px;width:196.86px;height:40px;background-color:gray"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div style ="position:absolute;float:left;left:131px;background:;top:215px;width:auto;height:auto;color:black;scaleX:1px;scaleY:1px;opacity:1px;font-size:20px;font-weight:normal;font-family:Times New Roman;text-align:center"&gt;
  Darshan&lt;/div&gt;
  &lt;div style ="position:absolute;float:left;left:149px;background:;top:105px;width:auto;height:auto;color:rgb(0,0,0);scaleX:1px;scaleY:1px;opacity:1px;font-size:;font-weight:;font-family:;text-align:"&gt;
  &lt;img src="http://192.168.1.51/mleads9.6/user_files/1403762976/sponsor/Chrysanthemum.jpg" width="100" height="100"/&gt;
  &lt;/div&gt;
  &lt;div style ="position:absolute;float:left;left:316px;background:;top:206px;width:auto;height:auto;color:black;scaleX:1px;scaleY:1px;opacity:1px;font-size:20px;font-weight:normal;font-family:Times New Roman;text-align:center"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/td&gt;
  &lt;td&gt;
  &lt;div style="background:#9abdd6;margin-left:0.25in;margin-right:0.25in;margin-bottom:in;margin-top:1in; height:3in;width:4in; position: relative;  float:left; "&gt;
  &lt;div style="height:3in; width:4in;background:#9abdd6"&gt;
  &lt;/div&gt;
  &lt;div style ="position:absolute;float:left;left:99px;background:;top:204px;width:auto;height:auto;color:gray;scaleX:0.51px;scaleY:1px;opacity:1px;font-size:;font-weight:;font-family:;text-align:"&gt;
  &lt;div style="left:99px;top:204px;width:196.86px;height:40px;background-color:gray"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div style ="position:absolute;float:left;left:131px;background:;top:215px;width:auto;height:auto;color:black;scaleX:1px;scaleY:1px;opacity:1px;font-size:20px;font-weight:normal;font-family:Times New Roman;text-align:center"&gt;
  Trainee&lt;/div&gt;
  &lt;div style ="position:absolute;float:left;left:149px;background:;top:105px;width:auto;height:auto;color:rgb(0,0,0);scaleX:1px;scaleY:1px;opacity:1px;font-size:;font-weight:;font-family:;text-align:"&gt;
  &lt;img src="http://192.168.1.51/mleads9.6/user_files/1403762976/sponsor/Chrysanthemum.jpg" width="100" height="100"/&gt;
  &lt;/div&gt;
  &lt;div style ="position:absolute;float:left;left:316px;background:;top:206px;width:auto;height:auto;color:black;scaleX:1px;scaleY:1px;opacity:1px;font-size:20px;font-weight:normal;font-family:Times New Roman;text-align:center"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;
  &lt;div style="background:#9abdd6;margin-left:0.25in;margin-right:0.25in;margin-bottom:in;margin-top:1in; height:3in;width:4in; position: relative;  float:left; "&gt;
  &lt;div style="height:3in; width:4in;background:#9abdd6"&gt;
  &lt;/div&gt;
  &lt;div style ="position:absolute;float:left;left:99px;background:;top:204px;width:auto;height:auto;color:gray;scaleX:0.51px;scaleY:1px;opacity:1px;font-size:;font-weight:;font-family:;text-align:"&gt;
  &lt;div style="left:99px;top:204px;width:196.86px;height:40px;background-color:gray"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div style ="position:absolute;float:left;left:131px;background:;top:215px;width:auto;height:auto;color:black;scaleX:1px;scaleY:1px;opacity:1px;font-size:20px;font-weight:normal;font-family:Times New Roman;text-align:center"&gt;
  Darshan&lt;/div&gt;
  &lt;div style ="position:absolute;float:left;left:149px;background:;top:105px;width:auto;height:auto;color:rgb(0,0,0);scaleX:1px;scaleY:1px;opacity:1px;font-size:;font-weight:;font-family:;text-align:"&gt;
  &lt;img src="http://192.168.1.51/mleads9.6/user_files/1403762976/sponsor/Chrysanthemum.jpg" width="100" height="100"/&gt;
  &lt;/div&gt;
  &lt;div style ="position:absolute;float:left;left:316px;background:;top:206px;width:auto;height:auto;color:black;scaleX:1px;scaleY:1px;opacity:1px;font-size:20px;font-weight:normal;font-family:Times New Roman;text-align:center"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/td&gt;
  &lt;td&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;
  &lt;/td&gt;
  &lt;td&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/body&gt;"
  </code></pre>
  
  <p>which shows perfect HTML result...</p>
  
  <p>The code I am using is:</p>
  
  <pre><code>$mpdf = new mPDF();
  $mpdf-&gt;allow_output_buffering = true;
  $mpdf-&gt;WriteHTML($html);
  $mpdf-&gt;Output();
  </code></pre>
  
  <p>but when I convert it to PDF then alignment totally disturbs.</p>