Q:

DIV CSS not aligning properly in lower IE versions

I have a JSP code with label and input fields in a div tag and its associated CSS.
The alignment of these fields look good in IE9+ but not in IE7.
Left div is little above and right div pretty lower. We have to support the lower IE versions too.
JSP code:-
<form:form...>
<DIV class="outer-left-bm">Location:&nbsp;</DIV><DIV class="outer-right-bm"><form:select path="location" items="${locationList}" itemValue="code" itemLabel="desc" /></DIV>
<DIV class="outer-left-bm">Name:&nbsp;</DIV><DIV class="outer-right-bm"><form:input path="Name" maxlength="20" size="20" /></DIV>
</form:form>

CSS :-
DIV.outer-left-bm {
    width:50%;
    float: left;
    border: 1px;
    text-align: right;
    margin-bottom: 8px;
}
DIV.outer-right-bm {
    width: 50%;
    float: right;
    border: 1px;
    text-align: left;
    margin-bottom: 8px;
}

Any help is appreciated.
update:-
<form:form>
<DIV style="font-size: 0;">
<DIV class="outer-left-bm">Location:&nbsp;</DIV><DIV class="outer-right-bm"><form:select path="location" items="${locationList}" itemValue="code" itemLabel="desc" /></DIV>
    <DIV class="outer-left-bm">Name:&nbsp;</DIV><DIV class="outer-right-bm"><form:input path="Name" maxlength="20" size="20" /></DIV>

CSS:-
DIV.outer-left-bm {
    width:49%;
    display: inline-block;
    min-height: 0;
    vertical-align: top;
    border: 1px;
    font-size: 13px;
    text-align: right;
    margin-bottom: 8px;
}
DIV.outer-right-bm {
    width: 50%;
    display: inline-block;
    min-height: 0;
    vertical-align: top;
    border: 1px;
    font-size: 13px;
    text-align: left;
    margin-bottom: 8px;
}

Update2:
DIV.outer-left-bm {
    width:49%;  
    min-height: 0;
    border: 1px;
    text-align: right;
    margin-bottom: 8px;
    display: inline-block;
    *display: inline;
    zoom: 1;
}
DIV.outer-right-bm {
    width: 50%; 
    min-height: 0;
    border: 1px;
    text-align: left;
    margin-bottom: 8px;
    display: inline-block;
    *display: inline;
    zoom: 1;
}

A:

Consider using display: inline-block instead of float. For removing whitespace between blocks set font-size: 0 for the container, and a pixel font-size for nested blocks like outer-left-bm.

FORM {
    font-size: 0;
}

FORM DL,
FORM DT,
FORM DD {
    margin: 0;
    padding: 0;
}

FORM DT,
FORM DD {
    display: inline-block;
    font-size: 13px;
    vertical-align: top;
    width: 49%;
}

/* Inline-block for IE7: */
*+HTML FORM DT,
*+HTML FORM DD {
    display: inline;
    min-height: 0;
}
<form>
    <dl>
        <dt>Location:</dt>
        <dd><select><option>Hello</option></select></dd>

        <dt>Name:</dt>
        <dd><input name="example" /></dd>
    </dl>
</form>

Note that to emulate display: inline-block in IE7, display: inline with a hasLayout-toggler like min-height: 0 (as in my code example) or zoom: 1 are needed.
But actually, for your case, a properly marked-up table would be enough and perfectly semantic (note using TH elements and the scope attribute):
<form>
    <table>
        <tr>
            <th scope="row">Location:</th>
            <td><select><option>Hello</option></select></td>
        </tr>
        <tr>    
            <th scope="row">Name:</th>
            <td><input name="example" /></td>
        </tr>
    </table>
</form>

We have to support the lower IE versions too.

Are you sure you really have to? Are you aware of the current IE7’s market share? Do you live in a parallel reality? ;-) Hint: the only versions that currently matter are at least IE9+.

