Pure CSS form styling with columns??!

Question

I have a form that I need styled to have 2, 4, and 6 columns. I named my classes col2, col4, and col6 respectively. I am having a lot of trouble especially with vertical alignment and the columns themselves. Can anyone help with this?

<div id="fieldset1" class="col2">
    <fieldset>
        <legend>Living Room </legend>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm122">Bar, Portable</label>
                <input name="SingleForm122" type="text" id="SingleForm122" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm123">Bookcase</label>
                <input name="SingleForm123" type="text" id="SingleForm123" class="inputText" />
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm124">Bookshelves, Sectional</label>
                <input name="SingleForm124" type="text" id="SingleForm124" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm125">Cabinet, Curio</label>
                <input name="SingleForm125" type="text" id="SingleForm125" class="inputText" />
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm126">Chair, Arm</label>
                <input name="SingleForm126" type="text" id="SingleForm126" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm127">Chair, Occasional</label>
                <input name="SingleForm127" type="text" id="SingleForm127" class="inputText" />
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm128">Chair, Overstuffed</label>
                <input name="SingleForm128" type="text" id="SingleForm128" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm129">Chair, Rocker</label>
                <input name="SingleForm129" type="text" id="SingleForm129" class="inputText" />
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm130">Chair, Straight</label>
                <input name="SingleForm130" type="text" id="SingleForm130" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm131">Clock, Grandfather</label>
                <input name="SingleForm131" type="text" id="SingleForm131" class="inputText" />
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm132">Day Bed</label>
                <input name="SingleForm132" type="text" id="SingleForm132" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm133">Desk, Small</label>
                <input name="SingleForm133" type="text" id="SingleForm133" class="inputText" />
            </div>
        </div>
    </fieldset>
</div>
<div style="clear: both;">
</div>
<div id="fieldset2" class="col4">
    <fieldset>
        <legend>Living Room </legend>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm122">Bar, Portable</label>
                <input name="SingleForm122" type="text" id="Text1" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm123">Bookcase</label>
                <input name="SingleForm123" type="text" id="Text2" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm124">Bookshelves, Sectional</label>
                <input name="SingleForm124" type="text" id="Text3" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm125">Cabinet, Curio</label>
                <input name="SingleForm125" type="text" id="Text4" class="inputText" />
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm126">Chair, Arm</label>
                <input name="SingleForm126" type="text" id="Text5" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm127">Chair, Occasional</label>
                <input name="SingleForm127" type="text" id="Text6" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm128">Chair, Overstuffed</label>
                <input name="SingleForm128" type="text" id="Text7" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm129">Chair, Rocker</label>
                <input name="SingleForm129" type="text" id="Text8" class="inputText" />
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm130">Chair, Straight</label>
                <input name="SingleForm130" type="text" id="Text9" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm131">Clock, Grandfather</label>
                <input name="SingleForm131" type="text" id="Text10" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm132">Day Bed</label>
                <input name="SingleForm132" type="text" id="Text11" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm133">Desk, Small</label>
                <input name="SingleForm133" type="text" id="Text12" class="inputText" />
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm134">Desk, Secretary</label>
                <input name="SingleForm134" type="text" id="Text13" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm135">Foot Stool</label>
                <input name="SingleForm135" type="text" id="Text14" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm136">Hide-a-bed or Studio Couch</label>
                <input name="SingleForm136" type="text" id="Text15" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm137">Lamp, Floor or Pole</label>
                <input name="SingleForm137" type="text" id="Text16" class="inputText" />
            </div>
        </div>
    </fieldset>
</div>
<div style="clear: both;">
</div>
<div id="fieldset3" class="col6">
    <fieldset>
        <legend>Living Room </legend>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm122">Bar, Portable</label>
                <input name="SingleForm122" type="text" id="Text25" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm123">Bookcase</label>
                <input name="SingleForm123" type="text" id="Text26" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm124">Bookshelves, Sectional</label>
                <input name="SingleForm124" type="text" id="Text27" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm125">Cabinet, Curio</label>
                <input name="SingleForm125" type="text" id="Text28" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm126">Chair, Arm</label>
                <input name="SingleForm126" type="text" id="Text29" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm127">Chair, Occasional</label>
                <input name="SingleForm127" type="text" id="Text30" class="inputText" />
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm128">Chair, Overstuffed</label>
                <input name="SingleForm128" type="text" id="Text31" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm129">Chair, Rocker</label>
                <input name="SingleForm129" type="text" id="Text32" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm130">Chair, Straight</label>
                <input name="SingleForm130" type="text" id="Text33" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm131">Clock, Grandfather</label>
                <input name="SingleForm131" type="text" id="Text34" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm132">Day Bed</label>
                <input name="SingleForm132" type="text" id="Text35" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm133">Desk, Small</label>
                <input name="SingleForm133" type="text" id="Text36" class="inputText" />
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm134">Desk, Secretary</label>
                <input name="SingleForm134" type="text" id="Text37" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm135">Foot Stool</label>
                <input name="SingleForm135" type="text" id="Text38" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm136">Hide-a-bed or Studio Couch</label>
                <input name="SingleForm136" type="text" id="Text39" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm137">Lamp, Floor or Pole</label>
                <input name="SingleForm137" type="text" id="Text40" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm138">Music Cabinet</label>
                <input name="SingleForm138" type="text" id="Text41" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm139">Rug, Large Roll</label>
                <input name="SingleForm139" type="text" id="Text42" class="inputText" />
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm140">Rug, Small Roll</label>
                <input name="SingleForm140" type="text" id="Text43" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm141">Sofa, 2 Cushions</label>
                <input name="SingleForm141" type="text" id="Text44" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm142">Sofa, 3 Cushions</label>
                <input name="SingleForm142" type="text" id="Text45" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm143">Sofa, 4 Cushions</label>
                <input name="SingleForm143" type="text" id="Text46" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm144">Sofa, Sectional</label>
                <input name="SingleForm144" type="text" id="Text47" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm145">Table, Coffee, End or Night</label>
                <input name="SingleForm145" type="text" id="Text48" class="inputText" />
            </div>
        </div>
    </fieldset>
</div>
<div style="clear: both;">
</div>

Answer 1

Why not just use tables? You have laid everything out like tables (rowContainer = tr, rowItem = td). All you need to do is change the div tags into table, tr and td tags.

Tables aren't evil, not if you want to display stuff in a tabular fashion. If tables are the easiest way to align things the way you want, then use tables.

Answer 2

I had similar issues too. I ended up using Blueprint CSS (or alternatively 960.gs) which simplifies creation of column based layouts greatly.

Answer 3

I personally use tables for virtually all forms, small and large. It's just so much easier to format and you get away with so much less code.

I recommend you use tables and solve your problems.

Answer 4

Not sure I understand what you're after, but if you're after a three columns layout with aligned borders, particularly the bottom one, and you have an unbalanced content, you can wrap your columns in a div (colWrapper), get rid of the div clearing on both sides, and remove the border applied to your fieldsets. By applying a overflow:hidden to the wrapper, then forcing a long margin (-3000px) in one way, and a long padding (3000px) to the columns, you can then apply the border to your columns and get the desired effect. It is also known as the "holy grail".

.col2,.col4,.col6{float:left;}
div > fieldset{border:none;}
#colWrapper{overflow:hidden;border-bottom:1px solid black;}
#colWrapper > div {border:1px solid; margin-bottom:-3000px;padding-bottom:3000px;}
.col2,.col4{border-right:none;}

Your HTML would be like:

<div id="colWrapper"><div id="fieldset1" class="col2">
    <fieldset>
        <legend>Living Room </legend>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm122">Bar, Portable</label>
                <input name="SingleForm122" id="SingleForm122" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm123">Bookcase</label>
                <input name="SingleForm123" id="SingleForm123" class="inputText" type="text">
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm124">Bookshelves, Sectional</label>
                <input name="SingleForm124" id="SingleForm124" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm125">Cabinet, Curio</label>
                <input name="SingleForm125" id="SingleForm125" class="inputText" type="text">
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm126">Chair, Arm</label>
                <input name="SingleForm126" id="SingleForm126" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm127">Chair, Occasional</label>
                <input name="SingleForm127" id="SingleForm127" class="inputText" type="text">
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm128">Chair, Overstuffed</label>
                <input name="SingleForm128" id="SingleForm128" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm129">Chair, Rocker</label>
                <input name="SingleForm129" id="SingleForm129" class="inputText" type="text">
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm130">Chair, Straight</label>
                <input name="SingleForm130" id="SingleForm130" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm131">Clock, Grandfather</label>
                <input name="SingleForm131" id="SingleForm131" class="inputText" type="text">
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm132">Day Bed</label>
                <input name="SingleForm132" id="SingleForm132" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm133">Desk, Small</label>
                <input name="SingleForm133" id="SingleForm133" class="inputText" type="text">
            </div>
        </div>
    </fieldset>
</div>

<div id="fieldset2" class="col4">
    <fieldset>
        <legend>Living Room </legend>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm122">Bar, Portable</label>
                <input name="SingleForm122" id="Text1" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm123">Bookcase</label>
                <input name="SingleForm123" id="Text2" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm124">Bookshelves, Sectional</label>
                <input name="SingleForm124" id="Text3" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm125">Cabinet, Curio</label>
                <input name="SingleForm125" id="Text4" class="inputText" type="text">
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm126">Chair, Arm</label>
                <input name="SingleForm126" id="Text5" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm127">Chair, Occasional</label>
                <input name="SingleForm127" id="Text6" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm128">Chair, Overstuffed</label>
                <input name="SingleForm128" id="Text7" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm129">Chair, Rocker</label>
                <input name="SingleForm129" id="Text8" class="inputText" type="text">
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm130">Chair, Straight</label>
                <input name="SingleForm130" id="Text9" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm131">Clock, Grandfather</label>
                <input name="SingleForm131" id="Text10" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm132">Day Bed</label>
                <input name="SingleForm132" id="Text11" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm133">Desk, Small</label>
                <input name="SingleForm133" id="Text12" class="inputText" type="text">
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm134">Desk, Secretary</label>
                <input name="SingleForm134" id="Text13" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm135">Foot Stool</label>
                <input name="SingleForm135" id="Text14" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm136">Hide-a-bed or Studio Couch</label>
                <input name="SingleForm136" id="Text15" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm137">Lamp, Floor or Pole</label>
                <input name="SingleForm137" id="Text16" class="inputText" type="text">
            </div>
        </div>
    </fieldset>
</div>

<div id="fieldset3" class="col6">
    <fieldset>
        <legend>Living Room </legend>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm122">Bar, Portable</label>
                <input name="SingleForm122" id="Text25" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm123">Bookcase</label>
                <input name="SingleForm123" id="Text26" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm124">Bookshelves, Sectional</label>
                <input name="SingleForm124" id="Text27" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm125">Cabinet, Curio</label>
                <input name="SingleForm125" id="Text28" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm126">Chair, Arm</label>
                <input name="SingleForm126" id="Text29" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm127">Chair, Occasional</label>
                <input name="SingleForm127" id="Text30" class="inputText" type="text">
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm128">Chair, Overstuffed</label>
                <input name="SingleForm128" id="Text31" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm129">Chair, Rocker</label>
                <input name="SingleForm129" id="Text32" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm130">Chair, Straight</label>
                <input name="SingleForm130" id="Text33" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm131">Clock, Grandfather</label>
                <input name="SingleForm131" id="Text34" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm132">Day Bed</label>
                <input name="SingleForm132" id="Text35" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm133">Desk, Small</label>
                <input name="SingleForm133" id="Text36" class="inputText" type="text">
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm134">Desk, Secretary</label>
                <input name="SingleForm134" id="Text37" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm135">Foot Stool</label>
                <input name="SingleForm135" id="Text38" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm136">Hide-a-bed or Studio Couch</label>
                <input name="SingleForm136" id="Text39" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm137">Lamp, Floor or Pole</label>
                <input name="SingleForm137" id="Text40" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm138">Music Cabinet</label>
                <input name="SingleForm138" id="Text41" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm139">Rug, Large Roll</label>
                <input name="SingleForm139" id="Text42" class="inputText" type="text">
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm140">Rug, Small Roll</label>
                <input name="SingleForm140" id="Text43" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm141">Sofa, 2 Cushions</label>
                <input name="SingleForm141" id="Text44" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm142">Sofa, 3 Cushions</label>
                <input name="SingleForm142" id="Text45" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm143">Sofa, 4 Cushions</label>
                <input name="SingleForm143" id="Text46" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm144">Sofa, Sectional</label>
                <input name="SingleForm144" id="Text47" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm145">Table, Coffee, End or Night</label>
                <input name="SingleForm145" id="Text48" class="inputText" type="text">
            </div>
        </div>
    </fieldset>
</div>
</div>

EDIT:

I think I better undertsand your issue, and it is much simpler than what I thought initially

Try these css :

<style charset="utf-8" type="text/css">

.rowItem{float:left;}
.col2 .rowItem{width:49.9%;}
.col4 .rowItem{width:24.9%;}
.col6 .rowItem{width:16.66%;}
.rowItem label {font-size:8px;text-align:right;}
.rowItem label, .rowItem input{float:left;display:block;width:49.9%;margin-bottom:12px;}
</style>