ie7 pushing down floats

Question

I'm having an ie7 issue. Everything seem to be working fine in Firefox and IE8.

In ie7 the first element works fine but all other are push down like they have a clear applied.

image depicts this best.

Here's the code.

.newLabellg 
{
    float:left; 
    width:66px; 
    margin:3px 0 0 0;
    font-weight:bold;
    color:#000;
}


<div style="float:left; width:320px;">

    <div style="margin-bottom:10px; float:left;">
        <div class="newLabellg">Cusotmer#:</div>
        <div style="float:left;">
        <asp:TextBox ID="CustomerNumber" runat="server" Width="220px"></asp:TextBox>
        </div>
    </div>

    <div style="margin-bottom:10px; float:left; clear:both;">
        <div class="newLabellg">Cusotmer:</div>
        <div style="float:left;">
        <asp:TextBox ID="CustomerName" runat="server" Width="220px"></asp:TextBox>
        </div>
    </div>

    <div style="margin-bottom:10px; float:left; clear:both;">
        <div class="newLabellg" style="float:left;">Address:</div>
        <div style="float:left;">
        <asp:TextBox ID="Address" runat="server" Width="220px"></asp:TextBox>
        </div>
    </div>

    <div style="margin-bottom:10px; float:left; clear:both;">
        <div class="newLabellg">Mailing Address:</div>
        <asp:TextBox ID="Address2" runat="server" Width="220px"></asp:TextBox>
        <div style="float:left; margin:3px 0 0 0">
        <asp:DropDownList ID="City" runat="server" Width="109px">
        </asp:DropDownList>
       <asp:DropDownList ID="Province" runat="server" Width="109px">
        </asp:DropDownList></div>

    </div>
</div>

Any Idea why/what ie7 is doing and how I can fix it?

Answer 1

Simply removing clear: both from each instance of:

<div style="margin-bottom:10px; float:left; clear:both;">

made it look correct in the browsers I tested it with: IE7/8 + Firefox.

If removing clear: both causes a different problem, let us know and we can find a workaround.