title: MPDF problems with floated div widths
body: <p>I have a problem that I am struggling to resolve with MPDF6</p>
  
  <p>I have a web application created using codeigniter, which displays results of a questionnaire survey.</p>
  
  <p>I have generated simple stacked bar charts in html and used jquery to animate the bars to their final sizes.  Works ok, and no problems.</p>
  
  <p>I want to be able to replicate the results in MPDF, so using the same theory of divs and sizing them accordingly, but this time I am setting the widths as inline style using php, and in most cases I have this working fine, however, if the value = 1, then for some reason mpdf goes funky, see example image below;</p>
  
  <p><a href="http://i.stack.imgur.com/ngRzN.png" rel="nofollow">Example of MPDF issue</a></p>
  
  <p>Here is an example of my php markup for the mpdf report</p>
  
  <pre><code>&lt;div class='survey'&gt;
              &lt;?php $nw = 390; $w = 400; $tot=0; $totpos=0; $score=0; $cat=0; foreach ($categories as $c) : ?&gt;
              &lt;p class='left question'&gt;&lt;?php echo $c-&gt;category_name; ?&gt;&lt;/p&gt;
              &lt;p class='left perc'&gt;&lt;?php echo number_format($summaryAnswers[$cat][6],1); ?&gt;%&lt;/p&gt;
              &lt;p class='left perc'&gt;&lt;?php echo number_format($summaryAnswers[$cat][7],2); ?&gt;&lt;/p&gt;
              &lt;div  style='width: &lt;?php echo $w; ?&gt;px;'  class='left chart'&gt;
                  &lt;?php if ($summaryAnswers[$cat][0] &gt; 0) : ?&gt;
                      &lt;div class='left barchart sagree' style='width: &lt;?php $width = $nw * $summaryAnswers[$cat][0]/$summaryAnswers[$cat][5]; echo $width; ?&gt;px;' tot='&lt;?php echo $summaryAnswers[$cat][5]; ?&gt;' val='&lt;?php echo $summaryAnswers[$cat][0]; ?&gt;' &gt;&lt;span class='label'&gt;&lt;?php echo $summaryAnswers[$cat][0]; ?&gt;&lt;/span&gt;&lt;/div&gt;
                  &lt;?php endif; ?&gt;
  
                  &lt;?php if ($summaryAnswers[$cat][1] &gt; 0) : ?&gt;
                      &lt;div class='left barchart agree' style='width: &lt;?php $width = $nw * $summaryAnswers[$cat][1]/$summaryAnswers[$cat][5]; echo $width; ?&gt;px;' tot='&lt;?php echo $summaryAnswers[$cat][5]; ?&gt;' val='&lt;?php echo $summaryAnswers[$cat][1]; ?&gt;' &gt;&lt;span class='label'&gt;&lt;?php echo $summaryAnswers[$cat][1]; ?&gt;&lt;/span&gt;&lt;/div&gt;
                  &lt;?php endif; ?&gt;
  
                  &lt;?php if ($summaryAnswers[$cat][2] &gt; 0) : ?&gt;
                      &lt;div class='left barchart neither' style='width: &lt;?php $width = $nw * $summaryAnswers[$cat][2]/$summaryAnswers[$cat][5]; echo $width; ?&gt;px;' tot='&lt;?php echo $summaryAnswers[$cat][5]; ?&gt;' val='&lt;?php echo $summaryAnswers[$cat][2]; ?&gt;'  &gt;&lt;span class='label'&gt;&lt;?php echo $summaryAnswers[$cat][2]; ?&gt;&lt;/span&gt;&lt;/div&gt;
                  &lt;?php endif; ?&gt;
  
                  &lt;?php if ($summaryAnswers[$cat][3] &gt; 0) : ?&gt;
                      &lt;div class='left barchart disagree' style='width: &lt;?php $width = $nw * $summaryAnswers[$cat][3]/$summaryAnswers[$cat][5]; echo $width; ?&gt;px;' tot='&lt;?php echo $summaryAnswers[$cat][5]; ?&gt;' val='&lt;?php echo $summaryAnswers[$cat][3]; ?&gt;'  &gt;&lt;span class='label'&gt;&lt;?php echo $summaryAnswers[$cat][3]; ?&gt;&lt;/span&gt;&lt;/div&gt;
                  &lt;?php endif; ?&gt;
  
                  &lt;?php if ($summaryAnswers[$cat][4] &gt; 0) : ?&gt;
                      &lt;div class='left barchart sdisagree' style='width: &lt;?php $width = $nw * $summaryAnswers[$cat][4]/$summaryAnswers[$cat][5]; echo $width; ?&gt;px;' tot='&lt;?php echo $summaryAnswers[$cat][5]; ?&gt;' val='&lt;?php echo $summaryAnswers[$cat][4]; ?&gt;'  &gt;&lt;span class='label'&gt;&lt;?php echo $summaryAnswers[$cat][4]; ?&gt;&lt;/span&gt;&lt;/div&gt;
                  &lt;?php endif; ?&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>I have tried both px width and %width both options give me the same result...</p>
  
  <p>here is the html that is generated by the script, you can see the values of each width look correct</p>
  
  <pre><code>&lt;div class='survey'&gt;
                              &lt;p class='left question'&gt;Organisation and Culture&lt;/p&gt;
              &lt;p class='left perc'&gt;66.7%&lt;/p&gt;
              &lt;p class='left perc'&gt;2.92&lt;/p&gt;
              &lt;div  style='width: 400px;'  class='left chart'&gt;
                                          &lt;div class='left barchart sagree' style='width: 97.5px;' tot='24' val='6' &gt;&lt;span class='label'&gt;6&lt;/span&gt;&lt;/div&gt;
  
                                          &lt;div class='left barchart agree' style='width: 162.5px;' tot='24' val='10' &gt;&lt;span class='label'&gt;10&lt;/span&gt;&lt;/div&gt;
  
                                          &lt;div class='left barchart neither' style='width: 32.5px;' tot='24' val='2'  &gt;&lt;span class='label'&gt;2&lt;/span&gt;&lt;/div&gt;
  
                                          &lt;div class='left barchart disagree' style='width: 81.25px;' tot='24' val='5'  &gt;&lt;span class='label'&gt;5&lt;/span&gt;&lt;/div&gt;
  
                                          &lt;div class='left barchart sdisagree' style='width: 16.25px;' tot='24' val='1'  &gt;&lt;span class='label'&gt;1&lt;/span&gt;&lt;/div&gt;
                                  &lt;/div&gt;
  
  
              &lt;br class='clear' /&gt;    
  </code></pre>
  
  <p>the css..</p>
  
  <pre><code>.survey { font-size: 10pt; }
  .survey .question   { width: 47%; padding: 5px 0;  }
  .survey .perc       { width: 5%; margin: 0; padding: 5px 0; }   
  .survey .no         { width: 2%; margin: 0; padding: 5px 0; }   
  .survey .chart      { width: 40%;  }    
  .survey .barchart   { padding: 5px 0; }
  .barchart .label    { margin: 0 0 0 5px; }
  div.sagree { background: #2DCC00; }
  div.agree { background: #F2E930; }
  div.neither { background: #888; }
  div.disagree{ background: #FFA519; }
  div.sdisagree { background: #FF1919;  }
  .right { float: right; }
  .left { float: left; }
  .clear { clear: both; }
  </code></pre>
  
  <p>anyone got any ideas why this is happening?</p>
  
  <p>cheers</p>