CSS - простая форма, неправильно форматирующая

Question

У меня есть следующая форма, где все форматируется правильно, за исключением кнопок отправки внизу формы: они должны быть центрированы.

Я пробовал различные комбинации вложенных элементов div в сочетании с настройками ширины, полей и выравнивания текста, но я не могу понять, что делаю неправильно.

http://jsfiddle.net/vM5fp/

Вот что у меня есть ...

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>

и 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

Кнопки плавающие (потому что они тоже input с). Либо измените их на <button>, либо измените CSS:

.buttonrow #submitButton, .buttonrow #cancelButton {

    float: none;
    width:auto;

}

http://jsfiddle.net/UcPD2/

Answer 2

Для форматирования форм вам гораздо удобнее использовать стилизованный неупорядоченный список, чем DIV.

form ul, form li {
   margin:0;
   padding:0
}


<ul>
    <li><label>....</label> <input ... /></li>
    ...
</ul>