HTML complex form layout using DIV's - html

Question

I need to make multi-column form layout, where each row can have different count of fields, like this:
First time I used table and td's colspan attribute for creating layout. But I read that laying out using tables is not good idea, so I want to improve my code to use div's.
So can anybody give me good example of how to make layout like above according to best practices? The most problem to me is that width of columns is different.
Thanks.

Answer 1

Don't kill me for not writing 100% valid input fields and not a clear layout with margins etc.
Sample
http://jsfiddle.net/hpmJ7/4/
HTML
<div>
<div class="w50">
<span class="label">Name</span>
<input type="text" value="Test" />
</div>
<div class="w50">
<span class="label">Surname</span>
<input type="text" value="Test" />
</div>
<div class="w100">
<span class="label">Contact</span>
<input type="text" value="Test" />
</div>
<div class="w50">
<span class="label">Age</span>
<input type="text" value="Test" />
</div>
<div class="w50">
<span class="label">Email</span>
<input type="text" value="Test" />
</div>
<div class="w70">
<span class="label">Phone</span>
<input type="text" value="Test" />
</div>
<div class="w30">
<span class="label">Time</span>
<input type="text" value="Test" />
</div>
<div class="w50">
<span class="label">Age</span>
<input type="text" value="Test" />
</div>
<div class="w50">
<span class="label">Email</span>
<input type="text" value="Test" />
</div>
</div>
CSS
* {
margin: 0;
padding: 0;
}
.label {
width: 60px;
display: inline-block;
}
.w30, .w50, .w70, .w100 {
height: 20px;
float: left;
display: inline-block;
width: 100%;
}
.w30{
width: 30%;
}
.w50{
width: 50%;
}
.w70{
width: 70%;
}
.w100{
width: 100%;
}

Answer 2

The trick here is to come up with some sort of grid system. In my example, I've put together a 5% based grid system. You can see a basic example of some of your exact pieces in this fiddle.
#container { font-size: 12px; width: 700px; }
.row { float: left; margin: 5px 0; width: 100%; }
.w10 { width: 10%; }
.w15 { width: 15%; }
.w20 { width: 20%; }
.w25 { width: 25%; }
.w30 { width: 30%; }
.w35 { width: 35%; }
.w40 { width: 40%; }
.w50 { width: 50%; }
.w60 { width: 60%; }
.w70 { width: 70%; }
.w80 { width: 80%; }
.w90 { width: 90%; }
.w100 { width: 100%; }
.item { box-sizing: border-box; float: left; }
input, select, option { margin: 0; }
And I've placed the items into rows to provide for a clean, grid-like look.
<div id="container">
<div class="row">
<div class="item w15">/* Entity Name</div>
<div class="item w35">Maricopa County Community College District</div>
<div class="item w50">*Domain: USPF, SLG, Special Districts, Community College</div>
</div>
<div class="row">
<div class="item w15">/* Doctype</div>
<div class="item w10">NLP?</div>
<div class="item w20">Filename/Keywords</div>
<div class="item w20">*Source Frequency</div>
<div class="item w35">
<input type="radio" name="freq" checked="checked" />
<label>Daily</label>
<input type="radio" name="freq" />
<label>Weekly</label>
<input type="radio" name="freq" />
<label>Monthly</label>
</div>
</div>
<div class="row">
<div class="item w15">
<input type="checkbox"/>
<label>Audit</label>
</div>
<div class="item w10">
<input type="checkbox"/>
</div>
<div class="item w20">
<input type="text"/>
</div>
<div class="item w20">*Every</div>
<div class="item w15">
<input type="text" class="w20" value="1"/>
<label>Days</label>
</div>
<div class="item w20">
<select>
<option value="utc-6">UTC -6</option>
</select>
</div>
</div>
</div>
Basically, a specific structure is what you're after, and a grid-like system placed in rows is a great way to do that.

Answer 3

Tables are not that bad.
The reason of why tables are not recomended for layout is that the table is loaded(content of it is shown) only when everything in the table has loaded in the page. But divs show their contents as soon as they are loaded.
Now in you case your form looks fairly complex to me and I think it is not desirable to show partial contents of this form while page is still loading. You definitly want to show all the fields of your form at the same time.
Also, when you want to represent tabular data (which I think applies to your case) then it is recomended to use tables.
So I would suggest(I may be wrong, please somebody correct me if I am) using table for this form of yours.
Also one more benefit that tables provide is you don't have to worry too much about the alignment of your contents.

Answer 4

You can basically create multiple css classes which will depict all those widths you want to depict. It will not be strictly flexible columns, but more like flexible rows, you will have to think in terms of rows instead of columns.
so for each row you would attach specific width classes
<div class="row">
<div class="left width-50"></div>
<div class="right width-50"></div>
</div>
<div class="row">
<div class="left width-70"></div>
<div class="right width-30"></div>
</div>
<div class="row">
<div class="left width-100"></div>
</div>
....
....
Hope it will help.

Answer 5

Check this out:
HTML
<html>
<head>
<link rel="stylesheet" href="contactForm.css"></link>
</head>
<body>
<div id="contactform">
<div id="first">
<div id="name">
<div id="description">Name</div>
<input type="text" name="textName">
</div>
<div id="surname">
<div id="description"> Surname</div>
<input type="text" name="textSurname">
</div>
</div>
<div id="second">
<div id="contact"><div id="description">Contact</div> <input type="text" name="textContact"></div>
</div>
<div id="third">
<div id="age">
<div id="description">Age</div>
<input type="text" name="textAge">
</div>
<div id="e-mail">
<div id="description">E-mail</div>
<input type="email" name="textEmail">
</div>
</div>
<div id="fourth">
<div id="phone">
<div id="description">Phone</div>
<input type="text" name="textPhone">
</div>
<div id="time">
<div id="description">Time</div>
<input type="date" name="textTime">
</div>
</div>
</div>
</body>
</html>
CSS
#contactform {width:500px; height:500px;}
#contactform div {float:left; padding-top:5px;}
#first, #second, #third, #fourth {width:100%;}
#first #description {width:30%;}
#name, #surname {width:50%;}
#surname #description {margin-left:11px;}
#first input {width:65%;}
#second #description {width:15%;}
#contact {width:100%;}
#second input {width:85%;}
#third #description {width:30%;}
#age, #e-mail {width:50%;}
#e-mail #description {margin-left:11px;}
#third input {width:65%;}
#fourth #description {width:30%;}
#phone, #time {width:50%;}
#time #description {margin-left:11px;}
#fourth input {width:65%;}
Output
HTH.