CSS & Forms - Resisting the urge to go to table layouts

Question

I am struggling with how to write the correct CSS for positioning some data entry forms. I'm not sure what the "proper" way to do it is.

An example of what I am trying to create a layout for:

Last Name        Middle Initial            First Name            DOB
|||||||||||||    ||||||                    ||||||||||||||||      ||||||||||

City         State         Zip
||||||||     ||||          |||||||||

Basically I have my labels and the ||| are representing my form elements (text boxes, dropdowns etc). I don't know the proper way to create classes for these elements without just creating one time use classes that specify a specific width that is only for these elements.

Also, how do I get all of these elements aligned properly and multiple items per line? Do I need to float each element?

Would I do something like:

<div class="last-name">
   <div class="label">
       <label>Last Name</label>
   </div>
   <div class="field">
       <input type="text" />
   </div>
</div>

<div class="middle-initial">
   <div class="label">
       <label>Middle INitial</label>
   </div>
   <div class="field">
       <input type="text" />
   </div>
</div>

...

<div class="clear"></div>

last-name and middle-initial etc would all be classes that would be used once and floated to the left. I'm not sure if this is a good way to go about it or not? Is there a better way to do this kind of positioning with CSS so I can avoid using tables?

Answer 1

I would choose to mark up this particular layout using fieldsets:

<form>
  <fieldset class="personal">
    <label>
      <span>Last Name</span>
      <input type="text" ... />
    </label>
    <label>
      <span>Middle Initial</span>
      <input type="text" ... />
    </label>
    ...
  </fieldset>
  <fieldset class="address">
    <label>
      <span>City</span>
      <input type="text" ... />
    </label>
  </fieldset>
</form>

I'd float all the labels, make the spans or inputs use display:block, and most everything should fall into place.