iphone でボックス3つ並べると右端が空く。。。

iphone でボックスを下記の様に3つ並べると右が空いてしまう。

<div style="width: 100%;">
<div style=" float: left; background-color: #FF0004; width: 33.3%;">左</div>
<div style=" float: left; background-color: #0CC915; width: 33.4%;">中</div>
<div style=" float: left; background-color: #032ABC; width: 33.3%;">右</div>
</div>

びしっと端に左右を揃えたい場合は
display:tableとtable-layout: fixed;とdisplay:table:cellを活用してどうにかできました。

<div style="width: 100%; display: table; table-layout: fixed;">
<div style=" display: table-cell; background-color: #FF0004;">左</div>
<div style=" display: table-cell; background-color: #0CC915;">中</div>
<div style=" display: table-cell; background-color: #0F9BC5;">右</div>
</div>

サンプル
http://bh0505.com/test/sp/box3.html