HTML complex form layout using DIV's

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.