Creating a form with floats, what is the general design when you need 2 columns, p and label?

Question

I want to design a form.

The form has 3 sections: user info, shipping and billing.

Each section will have 2 columns, so form fields and their labels with be on both the left and right side.

What technique should I use?

How does this look?

<div id="forms">
 <div id=contact>
      <div class=left>
               <p><label>Firstname<label><input type=text /></p>
      </div>
      <div class=right></div>
 </div>
 <div id=shipping></div>
<div id=billing></div>
</div>

Any tricks with the css i should know about?

Answer 1

I would use fieldsets with legends for the individual blocks. you can float the labels left without the extra divage e.g.

<form>
<fieldset>
<legend>block 1</legend>
<p>
<label>blah1</label><input type="text" name="blah1" value="" />
</p>
<p>
<label>blah2</label><input type="text" name="blah2" value="" />
</p>
</fieldset>
<fieldset>
<legend>block 2</legend>
<p>
<label>blah3</label><input type="text" name="blah3" value="" />
</p>
<p>
<label>blah4</label><input type="text" name="blah4" value="" />
</p>
</fieldset>
<p><button type="submit">submit</button></p>
</form>