Two input fields in one row, align one left and the other right

Question

I want to have a form which consists of different input fields. On some rows there should be two input fields. The second one should be aligned right.

jsFiddle

HTML:

<table>
    <tr>
        <td>
            <input type="text" name="first-name" class="form-first-name" />&nbsp;
            <input type="text" name="last-name" class="form-last-name" />
        </td>
    </tr>
    <tr>
        <td class="empty-row">&nbsp;</td>
    </tr>
    <tr>
        <td>
            <input type="text" name="address-1" class="form-address-1" />
        </td>
    </tr>
</table>

CSS:

.form-address-1 {
    width: 100%;
}

.form-first-name, .form-last-name {
    width: 46%;
}

.form-last-name {
    float: right;
}

My problem is that the input fields have different sizes and so the size of the row somehow changes. I tried to set the width of tr without success. How can I align the second input field right?

score 3 · Answer 1 · answered Sep 26 '13 at 20:34

3

You can do it like:

 <td>
      <span style="float:left">
          <input type="text" name="first-name" class="form-first-name" /></span>
       <span style="float:right">
           <input type="text" name="last-name" class="form-last-name" /></span>
 </td>

http://jsfiddle.net/KxUgt/8/

answered Sep 26 '13 at 20:34

Irfan TahirKheli

3,652
1
22
36

`.form-last-name` is not fully aligned to right side compared to `.form-address-1` – testing Sep 27 '13 at 07:17

score 2 · Accepted Answer · answered Sep 26 '13 at 20:32

2

Its a box-layout issue.

check with the inspector, and you'll see that your address input is overflowing its row. (thats because 100% + default margin/padding = more than 100%)

Working Fiddle

Add this to your CSS

*
{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

answered Sep 26 '13 at 20:32

avrahamcool

13,888
5
47
58

Thanks. So removing the margin/padding or reducing the size should work than! I checked the browser support for `box-sizing` and it seems that IE7 cannot handle that. So I set the width from `.form-address-1` to 99% and it worked in my first test. – testing Sep 27 '13 at 07:25

score 0 · Answer 3 · answered Sep 26 '13 at 20:28

0

Set the width of the table, not the tr.

answered Sep 26 '13 at 20:28

andi

6,442
1
18
43

In my responsive layout I don't want to set the width ... But I tried that and `.form-last-name` is not perfectly aligned to the right side. It should be on the same level as `.form-address-1` and aligned to the right. – testing Sep 27 '13 at 07:19

score 0 · Answer 4 · answered Sep 26 '13 at 20:29

0

make use of min-width: and also make .form-first-name{float:left;}

answered Sep 26 '13 at 20:29

vishalkin

1,175
2
12
24

hmmm I am doing something wrong? I set the `min-width` on table and I set the `float:left` as you said, but `.form-last-name` is not completely aligned to the right... – testing Sep 27 '13 at 07:21

Two input fields in one row, align one left and the other right

4 Answers4