Using floated DIVs to create two column form layout, unable to clear:right in IE8

I am using the following css to style two column form layout using . I am nable to get it right.

Here's a screenshot of the problem:

Here is the CSS involved:

.editor-label, .display-label{
    font-size:14px;
    font-weight:bold;
    float:left;
    width:160px;
    padding-top:8px;
    display: block;
    clear: left;

}

.editor-field 
{        
    padding-top: 8px;
    float: left;
    clear: right;
    width: 300px;
    display: block;           
}

The HTML is rather simple:

  <div class="editor-label">
        <label for="UserIdentitiy">*User Name</label>
  </div>

  <div class="editor-field">
            <input class="text-box single-line" data-val="true" data-val-required="Please provide a user name." id="UserIdentitiy" name="UserIdentitiy" type="text" value="" />
            <span class="field-validation-valid" data-valmsg-for="UserIdentitiy" data-valmsg-replace="true"></span>
  </div>

  <div class="editor-label">
            <label for="SS">Social Security</label>
  </div>
  <div class="editor-field">
            <开发者_如何学Python;input class="text-box single-line" id="SS" name="SS" type="text" value="" />
            <span class="field-validation-valid" data-valmsg-for="SS" data-valmsg-replace="true"></span>
  </div>

As form layouts have been done to death, they're really a solved problem. Instead of fighting, I'd recommend looking at existing solutions, such as the brilliant semantic markup patterns found in Formastic.

If you feel compelled to solve it yourself, though, you would have an easier time if you reorganised your markup a little:

<div class="form-field">
    <label for="UserIdentitiy">*User Name</label>
    <input class="text-box single-line" data-val="true" data-val-required="Please provide a user name." id="UserIdentitiy" name="UserIdentitiy" type="text" value="" />
    <span class="field-validation-valid" data-valmsg-for="UserIdentitiy" data-valmsg-replace="true"></span>
</div>

<div class="form-field">
    <label for="SS">Social Security</label>
    <input class="text-box single-line" id="SS" name="SS" type="text" value="" />
    <span class="field-validation-valid" data-valmsg-for="SS" data-valmsg-replace="true"></span>
</div>

And the CSS:

.form-field {
    clear: both;
    display: block;
    position: relative;
    font-size: 14px;
    padding-top: 8px;
}

.form-field label {
    float: left;
    width: 160px;
    font-weight: bold;
}

.form-field .single-line {
     display: inline-block;
     width: 300px;
}

This way you have a block scope for each "row" of your form, and the labels are more closely tied with their respective input field and errors.

Try adding a container around each label/input group and give the container a width.

.field-container{width:460px}

html

<div class="field-container">
      <div class="editor-label">
          <label for="UserIdentitiy">*User Name</label>
      </div>
      <div class="editor-field">
          <input class="text-box single-line" data-val="true" data-val-required="Please provide a user name." id="UserIdentitiy" name="UserIdentitiy" type="text" value="" />
          <span class="field-validation-valid" data-valmsg-for="UserIdentitiy" data-valmsg-replace="true"></span>
      </div>
</div>

http://jsfiddle.net/eqeB6/3/