CSS Float fails for HTML5 Input Elements - css

Question

I'm running into an issue when using HTML5 form input types (number, date, email, etc) with the CSS float property. I'm trying to float these to the right, but they are not honoring that setting.
Here's a snippit where I put the CSS inline during testing:
<div class="center" style="width: 100%">
...
<div style="width: 90%" class="textfont">
...
<table style="width:100%;">
<thead>
<tr class="tableHeading">
<td style="width: 50%; text-align: center;">
Unit Types
</td>
<td style="text-align: center;">
Number of Units
</td>
</tr>
</thead>
<tbody>
<tr>
<td style="border-right: 1px;">
Single-Family Detached
</td>
<td>
<input type="number" name="txtDetached" style="width:25%; float:right" />
</td>
</tr>
<tr>
<td style="height: 32px">
Townhouse, Row, or Cluster
</td>
<td style="height: 32px">
<input type="number" name="txtCuster" style="width:25%; float:right" />
</td>
</tr>
<tr>
<td>
Garden
</td>
<td>
<input type="number" name="txtGarden" style="width:25%; float:right" />
</td>
</tr>
<tr>
<td style="height: 43px">
Mid-rise (3-5)
</td>
<td style="height: 43px">
<input type="number" name="txtMidrise" style="width:25%; float:right" />
</td>
</tr>
<tr>
<td>
High-rise (6+)
</td>
<td>
<input type="number" name="txtHighRide" style="width:25%; float: right" />
</td>
</tr>
<tr>
<td>
Other
</td>
<td>
<input type="text" name="txtOther" style="width: 80%; float: right;" />
</td>
</tr>
</tbody>
</table>
...
</div>
...
</div>
Yes, I know tables are frowned upon...
Here's the overall CSS:
.Header
{
font-size: 30px;
font-family: Cambria;
color: White;
background: #254117;
text-align: center;
font-weight: bold;
width: 90%;
}
.subHeading
{
font-family: Arial;
font-size: 11px;
text-align: left;
}
.container
{
display: table;
width: 90%;
border-collapse: collapse;
}
.heading
{
font-weight: bold;
display: table-row;
background-color: #C91622;
text-align: center;
line-height: 25px;
font-size: 14px;
font-family: georgia;
color: #fff;
}
.table-row
{
display: table-row;
text-align: center;
}
.col
{
display: table-cell;
border: 1px solid #CCC;
}
.tableHeading
{
font-family: Arial;
background: #99C68E;
font-size: 18px;
text-align: left;
}
.textfont
{
font-size: 15px;
font-family: Arial;
text-align: left;
}
input[type=text]
{
width: 100%;
height: 22px;
}
textarea
{
width: 98%;
}
table
{
border-collapse: collapse;
border: 1px solid black;
border-spacing: 10px;
}
tr
{
border-collapse: collapse;
border: 1px solid black;
}
td, th
{
padding: 5px;
}
.center
{
margin-left: auto;
margin-right: auto;
}
Here's what this displays:
As you can see the input element with type="text" works without an issue, however when type="number" it remains at the default, left justified.
This behavior exists in IE 10, FireFox, and Chrome.
I discovered the workaround is to wrap the HTML5 input types in a div and then set the CSS to float the div right, and then this works without issue. I had issues finding information for this on the net, but is this a known issue? Is the workaround actually the proper way of handling this?
EDIT: Added full CSS (minus stuff I moved inline for testing). Added entire table and the div's they are wrapped in. If I copy all of this to jsFiddle it works properly, so I'm obviously doing something wrong here...

Answer 1

OK, the problem related to floating elements inside <td>, use text-align can fix it.
<td style="text-align:right;">
...
</td>
More can be read here DIV in <td> float right