Divs not working as expected

Question

I am trying to create the rows of controls. Basically it is for filtering a search. There are six controls in each row, 3 labels and 3 dropdownlists/textboxes. I have a div which creates rows and the first row turns out great but the rest is really weird.

The markup is the following

<div class="fullRow" style="margin-top:10px">
            <asp:Label ID="FilterDepartmentLabel" AssociatedControlID="FilterDepartment" runat="server" Text="Department" CssClass="aThirdLabel"></asp:Label>
            <asp:DropDownList ID="FilterDepartment" runat="server" CssClass="aThirdInput" />
            <asp:Label ID="FilterCardStatusLabel" AssociatedControlID="FilterCardStatus" runat="server" Text="Status" CssClass="aThirdLabel"></asp:Label>
            <asp:DropDownList ID="FilterCardStatus" runat="server" CssClass="aThirdInput" />
            <asp:Label ID="FilterCardBehaviorLabel" AssociatedControlID="FilterCardBehavior" runat="server" Text="Behavior" CssClass="aThirdLabel"></asp:Label>
            <asp:DropDownList ID="FilterCardBehavior" runat="server" CssClass="aThirdInput" />
        </div>
        <div class="fullRow" style="margin-top:10px">
            <asp:Label ID="FilterCarPlateLabel" AssociatedControlID="FilterCarPlate" runat="server" Text="Car Plate" CssClass="aThirdLabel"></asp:Label>
            <asp:TextBox ID="FilterCarPlate" runat="server" CssClass="aThirdInput"></asp:TextBox>
            <asp:Label ID="FilterCardNoLabel" AssociatedControlID="FilterCardNo" runat="server" Text="Car No" CssClass="aThirdLabel"></asp:Label>
            <asp:TextBox ID="FilterCardNo" runat="server" CssClass="aThirdInput"></asp:TextBox>
            <asp:Label ID="FilterRuleSetCodeLabel" AssociatedControlID="FilterRuleSetCode" runat="server" Text="Rule Set" CssClass="aThirdLabel"></asp:Label>
            <asp:DropDownList ID="FilterRuleSetCode" runat="server" CssClass="aThirdInput" />
        </div>
        <div class="fullRow" style="margin-top:10px">
            <asp:Label ID="FilterDriverLastNameLabel" AssociatedControlID="FilterDriverLastName" runat="server" Text="Driver Lastname" CssClass="aThirdLabel"></asp:Label>
            <asp:TextBox ID="FilterDriverLastName" runat="server" CssClass="aThirdInput"></asp:TextBox>
            <asp:Label ID="FilterCardTypeLabel" AssociatedControlID="FilterCardType" runat="server" Text="Type" CssClass="aThirdLabel"></asp:Label>
            <asp:DropDownList ID="FilterCardType" runat="server" CssClass="aThirdInput" />
        </div>

And here is the css

.fullRow
{
    width: 100%;
    display:block;
}

.aThirdLabel
{
    width: 15%;
    float: left;
    font-size:small;
    height: 22px;
}

.aThirdInput
{
    width: 15%;
    float: left;
}

Actually, even though this looks good in design view of VS2010, when its loaded in the browser, its a mess.

Thanks

EDIT: The answer is in the comment huMpty duMpty made.

Can you create a http://jsfiddle.net version of it? – freefaller Jul 20 '12 at 08:36 — freefaller, Jul 20 '12 at 08:36
try adding **float: left;overflow: hidden;** to .fullRow – huMpty duMpty Jul 20 '12 at 08:46 — huMpty duMpty, Jul 20 '12 at 08:46

score 1 · Accepted Answer · answered Jul 20 '12 at 09:03

1

Add <div style="clear:both;"></div> after each row.

answered Jul 20 '12 at 09:03

Episodex

4,479
3
41
58

Divs not working as expected

1 Answers1