How to align column and rows in form - forms

Question

I have a form, and want that a row has 2 or 3 columns, to do so I am doing
.formcol {
float: left;
padding: 2px;
}
.formcol label {
font-weight: bold;
display:block;
}
how to get something like this
here is the fiddle

Answer 1

see i made following changes to your html strucutre:
<div class="formcol row">
<div class="formcol form-left middle">
<input type="text" id="col1x" size="12" name="col1x" />
<label for="col1x" >col1x</label>
</div>
<div class="formcol form-right middle">
<input type="text" id="col2x" size="12" name="col2x" />
<label for="col2x">col2x</label>
</div>
</div>
and added one extra class of mine :
.middle > label
{
text-align: center;
font-weight: bold;
font-size: 15px;
color: black;
}
and it works: fiddle
for 3 columns: make your structure like:
<div class="formcol row">
<div class="formcol form-left middle">
<input type="text" id="col1x" size="12" name="col1x" />
<label for="col1x" >col1x</label>
</div>
<div class="formcol form-left middle">
<input type="text" id="col1x" size="12" name="col1x" />
<label for="col1x" >col2x</label>
</div>
<div class="formcol form-right middle">
<input type="text" id="col2x" size="12" name="col2x" />
<label for="col2x">col3x</label>
</div>
</div>
(it uses all your existing class, plus one of mine)

Answer 2

Use CSS and HTML to float 2 or 3 div element blocks. Within each div section place your form input fields. Then simply remember to clear your floats when you are done.
Also within your CSS, control the height of each input field to be the same all around (i.e.
.my-input {
height:20px;
}
and associate the class name .my-input to every input field you have on the page.
This should visually give you the sense that there are rows of input fields due to the equal height of each field.