CODEWITHSUNDEEP
c#jqueryhtmlcssasp.net-mvc
user793468
user793468

Reputation: 4966

formatting HTML form layout

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

Upvotes: 1

Views: 196

Answers (4)

Shyju
Shyju

Reputation: 218732

You can simply use DIV and CSS

<div class="divContainer">
@foreach(var item in Model.YourCollectionProperty)
{
  <div class="divItem">
       Some content here
  </div>
}
</div>

Have this CSS now

.divContainer
{
   width:100%;
}
.divItem
{
  width:33%; float:left;
}

Upvotes: 1

J&#248;rgen
J&#248;rgen

Reputation: 9130

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.

Upvotes: 2

HatSoft
HatSoft

Reputation: 11201

I would suggest you use div with css for layouts not table

table is good for tabular data but if need more than that then div is better

http://www.w3schools.com/html/html_layout.asp

Upvotes: 0

user1484136
user1484136

Reputation:

You can either use a table with 3 columns, or do divs.

Upvotes: 0

Related Questions