CSS - Simple form not formatting properly - css

Question

I've got the following form where everything formats properly with the exception of the submit buttons at the bottom of the form: they should be centered.
I've tried a variety of different combinations of nesting divs in combination with setting widths, margins, and text-aligns, but I can't seem to figure out what I am doing wrong.
http://jsfiddle.net/vM5fp/
Here is what I have so far...
HTML
<form id="myForm" action="#" method="post">
<div>
<label for="pickone" id="ruleTypeLabel">Pick One: </label>
<select id="pickone" name="pickone">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>
</div>
<div>
<label for="field1" id="field1label">Field 1: <span class="helpercomment">xx123</span></label>
<input type="text" id="field1" name="field1" />
</div>
<div>
<label for="field2" id="field2label">field 2: </label>
<input type="text" id="field2" name="field2" />
</div>
<div>
<label for="field3" id="field2">field 3: <span class="helpercomment">Separate by commas</span></label>
<textarea id="field 3" name="field 3"></textarea>
</div>
<div>
<label for="field4" id="field4label">field 4: </label>
<input type="text" id="field4" name="field4" />
</div>
<div>
<label for="startDate" id="startDateLabel">Start Date: <span class="helpercomment">MM/DD/YYYY</span></label>
<input type="text" id="startDate" name="startDate" class="date"/>
<a href="#" class="calendaricon">
<img src="Calendar.png" />
</a>
</div>
<div>
<label for="endDate" id="endDateLabel">End Date: <span class="helpercomment">MM/DD/YYYY</span></label>
<input type="text" id="endDate" name="endDate" class="date"/>
<a href="#" class="calendaricon">
<img src="Calendar.png" />
</a>
</div>
<div>
<div class="buttonrow">
<input type="submit" id="submitButton" value="Submit" />
<input type="submit" id="cancelButton" value="Cancel" />
</div>
</div>
</form>
And the css:
form {
width:300px;
margin:10px auto;
}
form div {
clear:both;
width:100%;
}
form div label {
display:block;
text-align:right;
width:140px;
float:left;
}
form div label .helpercomment{
display:block;
font-size:.8em;
font-style:italic;
color:#C1C2D7;
background-color:#FFF;
text-align:right;
}
form div input, form select, form textarea {
float:left;
width:140px;
margin:2px 0 20px 10px;
}
form div input.date {
width:113px;
}
form div a.calendaricon {
}
form div a.calendaricon img {
display:inline;
border:none;
margin-top:2px;
margin-left:4px;
}
form div div.buttonrow {
text-align:center;
width:auto;
margin:auto;
}
.buttonrow #submitButton, .buttonrow #cancelButton {
width:auto;
}

Answer 1

The buttons are floating (because they're inputs too). Either change them to <button> or modify the CSS:
.buttonrow #submitButton, .buttonrow #cancelButton {
float: none;
width:auto;
}
http://jsfiddle.net/UcPD2/

Answer 2

You're far better off using a styled unordered list than DIVs to format forms.
form ul, form li {
margin:0;
padding:0
}
<ul>
<li><label>....</label> <input ... /></li>
...
</ul>