CSS: Using Fieldset in place of Tables to lay out form information

Typically, I've used tables or nested div tags to lay out a page that has label/input items for forms such as "Contact Us". Although tables and div tags can work fine, I found that using a fieldset tag with label and input tags can be very easy to use with a little CSS to help things along.

First here is a sample fieldset layout:
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name" />
<label for="phone">Phone Number</label>
<input type="text" name="phone" id="phone" />
</fieldset>

Which looks as follows:

Name

Phone Number

This will layout the data from top to bottom, vertically. Now the problem is the default spacing and border stuff. To control this, attach a stylesheet or style tag with class definitions as follows:

/*get rid of gray border*/
.styleFieldset {border: 0 none;}

/*style the input fields*/
.styleFieldset input{
border: solid;
border-color:#9FB6CD;
border-width: thin;
background: #FFF;
width: 250px;
height: 25px;
font-size:100%;
float: left;
clear: left;
border-radius: 3px;
color: #4F4F4F;
}

/*style the label fields*/
.styleFieldset label {
float: left;
clear: left;
text-align:left; 
width:250x; 
color:#006296;
font-weight:bold;
padding-bottom:5px;
padding-top:12px}

Which then you would apply the class as follows:

<fieldset class='styleFieldset'>
<label for="name">Name</label>
<input type="text" name="name" id="name" />
<label for="phone">Phone Number</label>
<input type="text" name="phone" id="phone" />
</fieldset>

And finally should look as follows:

Name

Phone