Question

I have a HTML form which I need to format. It is a long form and people have to scroll(Vertically) to access the entire from. Now, I have a lot of white space on the right side of the form fields, I want to divide the form into three sections and display Three sections Horizontally as compared to one long vertical form.

Current Layout:

Field1
Field2
Field3
Field4
Field5
Field6

New Layout:

Field1     Field3     Field5
Field2     Field4     Field6

What is the best way of approaching this?

Thanks in advance

Answer 1

In order to acheive the correct tab order (if you don’t want to set them manually), you should create one wrapper element for each column and have them float next to eachother.

<div class="col">
<label>Field1 <input type="text"/></label>
<label>Field2 <input type="text"/></label>
</div>
<div class="col">
<label>Field3 <input type="text"/></label>
<label>Field4 <input type="text"/></label>
</div>
<div class="col">
<label>Field5 <input type="text"/></label>
<label>Field6 <input type="text"/></label>
</div>

CSS:

.col{
  width: 30%;
  float: left;
}

…and here’s the jsFiddle.