Задача
Добиться, чтобы поля ввода находились друг под другом, и при этом их положение определялось максимальной длиной заголовка поля слева. Решение не должно использовать таблиц и JavaScript.
![forms_1 forms_1](https://habrastorage.org/getpro/habr/post_images/3e6/6b7/156/3e66b715650e2b7f3cf86e8803691bce.jpg)
Решение
Шаг первый
Создадим HTML-разметку.
<div class="field">
<label for="n">Имя</label>
<input type="text" id="n" />
</div>
<div class="field">
<label for="ln">Фамилия</label>
<input type="text" id="ln" />
</div>
<div class="field">
<label for="a">Место жительства</label>
<input type="text" id="a" />
</div>
![forms_2 forms_2](https://habrastorage.org/getpro/habr/post_images/5d4/c68/c3c/5d4c68c3c2060e3af8804d6e3981d7a9.jpg)
Шаг второй
Выровняем содержимое каждого дива по правому краю и назначим ему обновление потока.
.field {clear:both; text-align:right;}
![forms_6 forms_6](https://habrastorage.org/getpro/habr/post_images/ff1/2b0/ea7/ff12b0ea7ec40b5f1d1b729c310062a9.jpg)
Шаг третий
Заставим каждый элемент label «утечь» влево.
.field {clear:both; text-align:right;}
label {float:left;}
Теперь каждый заголовок встал напротив соответствующего поля, но ширина формы стала 100% от ширины родительского элемента.
![forms_4 forms_4](https://habrastorage.org/getpro/habr/post_images/eb5/9a0/f7d/eb59a0f7d67f7b4388e33fe0172beeb3.jpg)
Шаг четвертый
Для того, чтобы прижать поля к заголовкам, обернём всю конструкцию блоком:
<div class="main">
<div class="field">
<label for="n">Имя</label>
<input type="text" id="n" />
</div>
<div class="field">
<label for="ln">Фамилия</label>
<input type="text" id="ln" />
</div>
<div class="field">
<label for="a">Место жительства</label>
<input type="text" id="a" />
</div>
</div>
Добавим в CSS обтекание для этого блока:
.field {clear:both; text-align:right;}
label {float:left;}
.main {float:left}
![forms_5 forms_5](https://habrastorage.org/getpro/habr/post_images/e99/d76/ada/e99d76ada00c3881130a6b636f866d1e.jpg)
Шаг пятый
Теперь видно, что из-за float элементы перестали находится на одной линии. Vertical-align, к сожалению, работать не будет, но можно воспользоваться line-height.
Также зададим отступ между заголовком и полем:
.field {clear:both; text-align:right; line-height:25px;}
label {float:left; padding-right:10px;}
.main {float:left}
![forms_1 forms_1](https://habrastorage.org/getpro/habr/post_images/3e6/6b7/156/3e66b715650e2b7f3cf86e8803691bce.jpg)
Работающий вариант можно посмотреть здесь. А также заходите на сайт piumosso ))