styling with div blocks

I have a single line (left screen to right side) that I want to format so that the form look justified regardless the number of elements as the style is repeated (between 2 and 5 elements)

Why are the div tags overlapping each other when I inspect the following rendered HTML?

<div class="grid_7 ">
    <div class="grid_2">
  开发者_如何学Go      <asp:TextBox ID="TextBoxFirstName" runat="server" Text='<%# Bind("F1FirstName")%>'></asp:TextBox>
    </div>
    <div class="push_1 grid_2 float-left ">
        <asp:Label Text="Last Name: " ID="LastName" runat="server" />
    </div>
    <div class="grid_3 float-left">
        <asp:TextBox ID="TextBoxLastName" runat="server" Text='<%# Bind("F2LastName")%>' />
    </div>
</div>

[EDIT]`.float-left { float:left; }

.float-right { float:right; }`

.container_12 .push_1 { left: 80px; }

.container_12, .container_16 { padding: 0 10px 0 10px; margin-left: auto; margin-right: auto; width: 960px; height: auto; }

.grid_12 { display: inline; float: left; margin-left: 0px; margin-right: 0px; }

All is wrapped in the "container_12" and "grid_12" within that container within the master page. Grids are evenly spaced portions within the container so I will not include that code. Pushes/pulls are left right movements of the div in and all defined with "position:relative" the style float-left was my attempt to manually align these divs and simply assign the property "float-left" Please let me know if more is needed.

---

You're going to need to provide all applicable styles from your stylesheet.

eg: grid_7, grid_2, grid_3, push_1, etc