Что заставляет браузер отключить div1 на дополнительные 29 пикселей

В html-сегменте ниже div1 смещается на 216px, div2 смещается 187. Что бы это вызвало и как я могу его исправить. Я знаю, что мог бы сделать позицию относительной и получить отрицательный результат 29, чтобы достичь того, чего хочу, но то, что я действительно хочу знать, - это то, почему броузер интерпретирует ее как необходимость в этом неравномерном смещении. Элементы списка были усечены для удобства чтения. Это html5.

<div class="divpnl900W margin2">
    <fieldset>
        <legend>SubscriberSetup</legend>
        <div class="clear-fix">
            <div id="div1" class="divpnl400W inlineblock">
                <ul class="nobullet">
                    <li> <span class="div150RAlgn inlineblock">
                        @Html.LabelFor(model => model.SubscriberCompanyName)
                    </span>
 <span class="editor-field-alLw220 padding1">
                        @Html.EditorFor(model => model.SubscriberCompanyName)
                        @Html.ValidationMessageFor(model => model.SubscriberCompanyName)
                    </span>

                    </li>...</ul>
            </div>
            <div id="div2" class="divpnl400W inlineblock">
                <ul class="nobullet">
                    <li> <span class="div150RAlgn inlineblock">
                        @Html.LabelFor(model => model.SubscriberTrainingType)
                    </span>
 <span class="editor-field-alLw220 padding1">
                        @Html.DropDownListFor(model => model.SubscriberTrainingType, Model.TrainTypes)
                        @Html.ValidationMessageFor(model => model.SubscriberTrainingType)
                    </span>

                    </li>...</ul>@Html.HiddenFor(model => model.SubscriberId, new { @Value = "0" }) @Html.HiddenFor(model => model.SubscriberLoginId, new { @Value = "0" })
                <div style="text-align:right;">
                    <button type="submit" title="Save" role="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" style="height:22px;"> <span class="ui-button-icon-primary ui-icon ui-icon-disk"></span>
 <span class="ui-button-text">Save</span>

                    </button>
                </div>
            </div>
        </div>
    </fieldset>
    <div class="divpnl500W">
        <ul class="nobullet">
            <li> <span class="div150RAlgn inlineblock"><label>Search Company Name:</label></span>
 <span class="editor-field-alLw220 padding1">
                <input type="text" id="txtSrchSubscriber" />
            </span>
 <span>
                <button type="button" title="Search" role="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only"
                        style="height:22px;" onclick="getSubscriberGrid()">
                    <span class="ui-button-icon-primary ui-icon ui-icon-search"></span>
 <span class="ui-button-text">Search</span>

                </button>
                </span>
            </li>
        </ul>
    </div>

Css

.clear-fix:after {
    content:".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}
.divpnl900W {
    width:900px;
}
.margin2 {
    margin: 2em;
}
.divpnl400W {
    width:400px;
}
.inlineblock {
    display: inline-block;
}
.div150RAlgn {
    width:150px;
    text-align:right;
    padding-right:3px;
}
.editor-field-alLw220 {
    width:220px;
}
.editor-field-alLw220 input[type="text"] {
    width:210px;
}
.editor-field-alLw220 input[type="password"] {
    width:210px;
}
.nobullet {
    list-style: none;
    list-style-type:none;
    padding-left:1em;
}
html {
    background-color: #e2e2e2;
    margin: 0;
    padding: 0;
}
body {
    background-color: #fff;
    border-top: solid 10px #000;
    color: #333;
    font-size: .85em;
    font-family:"Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
}
div {
    margin:1px;
    padding:1px;
}

http://jsfiddle.net/isherwood/Fea7A/