Home/ Questions/Q 615289
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T18:12:15+00:00

I have a form that I need styled to have 2, 4, and 6

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0