safari mobile nested divs don't respect width?

Question

I'm trying to divide content inside of a table cell into two halfs and center content in each of those 2 halfs. In all other browsers (IE,Firefox,Safari) this appears to work:

<td style="width:100%;">
 <div style=""width:100%; height:24px;">
  <div style="height:24px; float:left; width:50%; background-color:blue;"></div>
  <div style=" height:24px; float:right; width:50%; background-color:red;"></div>
 </div>
</td>

However, this isn't working in Safari mobile. Any ideas?