CSS Float fails for HTML5 Input Elements

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&#45;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&#45;rise (3&#45;5)
                 </td>
                 <td style="height: 43px">
                      <input type="number" name="txtMidrise" style="width:25%; float:right" />
                  </td>
               </tr>
                <tr>
                    <td>
                        High&#45;rise (6&#43;)
                    </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:

Failing Float

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...

Seems to work fine for me. Please post all your CSS relevant to the table and its cells—an isolated case that shows your problem. — Sebastian Simon
– Sebastian Simon, Commented Mar 9, 2015 at 14:18
yup it is working fine as you can see here: jsfiddle.net/98h5jrbw — dippas
– dippas, Commented Mar 9, 2015 at 14:19
works fine for me in chrome, ff and ie11, if you are having trouble. Instead of floating the input right, why not just use text-align right on the td — Pete
– Pete, Commented Mar 9, 2015 at 14:19
Hmm...I must have some other CSS somewhere that's throwing me off. Let me do some digging and I'll post an update with some more code. — JNYRanger
– JNYRanger, Commented Mar 9, 2015 at 14:21
@JNYRanger are you sure there are always 2 td in each tr inside the table? — Stickers
– Stickers, Commented Mar 9, 2015 at 14:28

Community · Accepted Answer · 2017-05-23 12:30:03Z

2

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

edited May 23, 2017 at 12:30

CommunityBot

11 silver badge

answered Mar 9, 2015 at 15:20

Stickers

79.1k24 gold badges157 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS Float fails for HTML5 Input Elements

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related