span width and float on mpdf doesn't work

Question

i am on developing report html using mpdf library. my code is:

..
<td style="width:400px">
<span style="float:left; width:60px;">Rp</span>
<span style="float:right; width:340px;">100</span>
</td>
..

i want it to be appear 'Rp' in left side and '100' in the right side, in the browser it shows perfect result as i want, but when generated into pdf, both of them is on the left side. and the width of the span doesnt correct. why this doesnt work?

someone help me please, thanks.

Answer 1

Try to use "percent" instead of "px":

HTML:

<table>
    <tr>
        <td>
            <span>Rp</span>
            <span>100</span>
        </td>
        <td>
            second TD
        </td>
    </tr>
</table>

CSS:

table{
    width: 100%;
    border: 1px solid red;
}

td {
    width: 400px;
}

td span{
    float: left;
    border: 1px solid green;
    width: 20%;
    margin-right: 10px;
}

td span:nth-child(2){
    border: 1px solid blue;
    width: 60%;
}

Demo : http://jsfiddle.net/R5KW6/1/

Answer 2

If you want to make space between some data and <span> with mpdf,alternatively you can also use entities, for example:

<span>&nbsp;YOUR TEXT HERE</span>

&nbsp - adds real non-breaking space