How can I line up a multi row/column form? - css

Question

I want to be able to line up the labels correctly in columns, so that varying length/type input fields always line up. The labels are always formatted to the same length.
Also, I could do with being able to omit rows in come of the columns if required. I've achieved this by having a within the cols div.
What I've done works; however, it 'feels' as though it's a fudge, and I think there should be better ways of achieving this.
Cheers.
<div id="divAddInputFields">
<fieldset id="fsAddInputFields" class="inputFieldSet">
<div id="divFsAddCol1">
<div id="divFsAddCol1Row1">
<label id="lblGenCode" for="wsGenCode">Gen Code</label><input type="text" class="String02" name="wsGenCode" id="wsGenCode" />
</div>
<div id="divFsAddCol1Row2">
<label id="lblRelNote" for="wsRelNote">Rel Note</label><input type="text" class="String12" name="wsRelNote" id="wsRelNote" />
</div>
<div id="divFsAddCol1Row3">
<label id="lblQuantity" for="wsQuantity">Quantity</label><input type="text" class="Number7_0" name="wsQuantity" id="wsQuantity" />
</div>
</div>
<div id="divFsAddCol1Row1">
</div>
<div id="divFsAddCol2">
<div id="divFsAddCol2Row1">
<label id="lblCofC" for="wsCofC">C of C</label><input type="text" class="String12" name="wsCofC" id="wsCofC" />
</div>
<div id="divFsAddCol2Row2">
<label id="lblComp" for="wsComp">Comp</label><input type="checkbox" class="checkbox1" name="wsComp" id="wsComp" />
</div>
</div>
</fieldset>
</div>
Page specific css (in an external file.....).
#divAddInputFields {width:460px; margin:0px 0px 0px 0px; height:160px; overflow:auto; float:left; }
#divFsAddCol1 {width:220px; margin:0px 0px 0px 0px; height:140px; overflow:auto; float:left; }
#divFsAddCol2 {width:220px; margin:0px 0px 0px 0px; height:140px; overflow:auto; float:left; }
Css from a library
.inputFieldSet
{ padding:0px 0px 0px 0px;
border:none;}
.label, .inputFieldSet label {
height:15px;
width:80px;
display: inline-block;
border:1px solid black;
padding:1px 2px 1px 2px;
background-color:#66cdaa;
vertical-align:top;
text-align:left;
margin:0px 1px 1px 3px;
font-size:10px;
}
.inputFieldSet input {
height:15px;
padding:1px 2px 1px 2px;
border:1px solid grey;
vertical-align:top;
position: relative;
/*overflow: hidden;*/
margin:0px 0px 1px 0px;
}
.inputFieldSet input[type="submit"] {
padding:1px 2px 1px 2px;
vertical-align:top;
height:20px;
position: relative;
/*overflow: hidden;*/
margin:0px 0px 1px 0px;
}
.inputFieldSet input[type="checkbox"] {
padding:1px 2px 1px 2px;
vertical-align: top;
margin: 0px 0px 0px 0px;
}
.inputFieldSet select {
padding:1px 0px 1px 2px;
vertical-align: top;
position: relative;
/*overflow: hidden;*/
margin:0px 0px 1px 0px;
}

Answer 1

I would use a <table> for this if you can.
Tables are intended for displaying tabular data like this.
They (correctly) got a bad rap for being used for doing HTML design layout.
But for tablular data like this I would use one.
You'll obviously be able to take care of alignment issues much easier.