Lining up inputs & their labels cleanly

Lines up inputs & their labels cleanly also shows how to do multiple columns of both.

by Matt Rummler

HTML

<div class="column1">
    <label for="input1">Input 1 this one is long: </label>
    <label for="input2">Input 2: </label>
    <label for="input3">Input 2: </label>
</div>

<div class="column2">
    <input type="text" value="" name="input1" id="input1" />
    <input type="text" value="" name="input2" id="input2" />
    <input type="text" value="" name="input3" id="input3" />
</div>

<div class="column3">
    <label for="input4">Input 4: </label>
    <label for="input5">Input 5: </label>
    <label for="input6">Input 6: </label>
</div>

<div class="column4">
    <input type="text" value="" name="input4" id="input4" />
    <input type="text" value="" name="input5" id="input5" />
    <input type="text" value="" name="input6" id="input6" />
</div>

CSS

label,
input 
{
    display: block;
}
input
{
    width:200px;
}
label 
{
    width:100%;/*px;*/
    padding: 3px 5px 0 35px;
}
[class*=column]
{
    float: left;
}