Не могу выровнять инпуты

[whatever1]

Добрый день.

Я не дизайнер и не верстальщик, я программист, но вот появилась необходимость сделать веб-интерфейс, и в качестве красивости для него выбор пал на twitter bootstrap.

В общем для примера есть такая вот табличка:

на jsFiddle

mystyle.css (в общем-то изначально для уменьшения размера текста) такой:

 tbody label,tbody input[type="text"],tbody input[type="number"],tbody {
    font-size: 12px;
}

tbody label {
    width: 128px;
}

tbody input[type="text"],tbody input[type="number"] {
    height: 16px;
    margin-bottom: 2px;

}

Что я хочу - в последней колонке три инпута, как бы их выровнять под линеечку?

Сейчас это выглядит как на картинке1.

Мне почему-то казалось, что нужно всего лишь добавить float: right инпутам, но это приводит к абсолютно необъяснимым для меня результатам, причем в разных браузера по разному (картинка 2).

[USF]

такой результат, скорее всего, из-за отсутствия очистки потока и обтекания лейблов.

выход рас - сделать всем инпутам статический margin слева на величину самого длинного слова

выход два -очищать поток каждого инпута и лейблы (clear: both)

http://twitter.github.com/bootstrap/base-css.html#forms

посмотрите пример "Горизонтальная форма"

[whatever1]

Спасибо!

Если сделать вот так:

tbody label {
    width: 128px;
    clear: right;
}

tbody input[type="text"],tbody input[type="number"] {
    height: 16px;
    margin-bottom: 2px;
    margin-left: 1px;
    float: right;
}

То выглядит как и хотелось, ровнехонько.

Вот только ИЕ по прежнему раскукоживает последнюю колонку чуть ли не на пол экрана. Такое ощущение, что он все остальные колонки ужимает по максимуму. Как это побороть и почему вообще так происходит? Подскажите пожалуйста.