I have a form which has a series of label/input pairs.
I'm trying to get these to line up.
It's quite simple in tables: you just layout the table as follows:
<table><tr><td>Your name</td><td><input name="name" type="text" /></td></tr>
<tr>...</tr></table>
If I try the same thing with CSS:
<div class="row">
<lable class="label-left">Name</div>
<div class="input-right"><input name="name" type="text" /></div>
</div>
<div class="row">
<lable class="label-left">...</div>
<div class="input-right"><input name="foo" type="text" /></div>
</div>
.row{
float: left;
clear: both;
width: 100%;
padding: 8px;
overflow: hidden;
}
.label-left{
float: left;
clear: both;
}
.input-right{
float: right;
clear: both;
}
The rows are presented as boxes with the label at the top left hand corner and the input box at the bottom right.
I'd like the row to have the elements displayed as a row.