How to prevent DIVs from sliding over each other

Question

I’m going to use DIV-based layout instead of table-based to reduce amount of markups and speed up page loading, however I’ve found it too much tricky as I’m not CSS guru. I use following CSS class to simulate rows of a table containing one column for label and one for textbox.

.FormItem
{
    margin-left: auto;
    margin-right: auto;
    width: 604px;
    min-height: 36px;
}
.ItemLabel
{
    float: left;
    width: 120px;
    padding: 3px 1px 1px 1px;
    text-align: right;
}
.ItemTextBox
{
    float: right;
    width: 480px;
    padding: 1px 1px 1px 1px;
    text-align: left;
}

,

<div class="FormItem">
    <div class="ItemLabel">
            <asp:Label ID="lblName" runat="server" Text="Name :"></asp:Label>
        </div>
        <div class="ItemTextBox">
            <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
            <p><span>User Name</span></p>
        </div>
</div>
<div class="FormItem">
        <div class="ItemLabel">
            <asp:Label ID="lblComments" runat="server" Text="Comments :"></asp:Label>
        </div>
        <div class="ItemTextBox">
        <asp:TextBox ID="txtComments" runat="server"></asp:TextBox>
            <p><span>(optional)Comments</span></p>
        </div>
</div>

These styles work fine if the height of ItemData DIVs are less than or equal to FormItem DIVs min-height. If ItemData DIVs height gets more than FormItem height then ItemText DIVs start sliding over FormItem DIVs to and ItemText and ItemData are no longer aligned. For example the following markups…

<div class="FormItem">
    <div class="ItemLabel">
        <asp:Label ID="lblName" runat="server" Text="Name :"></asp:Label>
    </div>
    <div class="ItemTextBox">
        <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
        <p><span>User Name</span></p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
    </div>
</div>
<div class="FormLabel">
    <div class="ItemText">
        <asp:Label ID="lblComments" runat="server" Text="Comments :"></asp:Label>
    </div>
    <div class="ItemTextBox">
    <asp:TextBox ID="txtComments" runat="server"></asp:TextBox>
        <p><span>(optional)Comments</span></p>
    </div>
</div>

I've tried several CSS attributes such as; position, float, clear… but I can not correct the problem. I’ll be appreciated for any help.

Answer 1

When nodes are floated they are pulled out of the layout flow, and therefore aren't aware of other nodes (and won't shrink when colliding).

Answer 2

Check out a similar pattern here:

Professional forms layout in column

Answer 3

When making a two-column layout there are lots of approaches you can use and lots of gotchas in certain cases.

A basic approach for simple layouts, where you want to replicate a table-like structure, might use this approach

<div class="outer">
  <div class="row"><label>Name:</label><p>Content</p></div>
  <div class="row"><label>Name2:</label><p>Content</p></div>
</div>

You can style it as follows:

.outer { width: 800px;}
.outer .row { float: left; width: 100%; overflow: visible;}
.outer .row label { width: 100px; float: left; }
.outer .row p { width: 700px; float: left; margin: 0;}

This gives you a two-column layout, with the labels on the left and the ps on the right. Note: both the label and p float left because you always want them touching no matter how wide the container is.

If you want the layout to be more fluid when resized you need to look into more advanced techniques. Ultimately it is very difficult to replicate the full table-layout rendering without using a table, unless you use display: table, display: table-cell, etc (which don't work in IE 6 or 7).

For your example you might want to replace the p with a div; the key however is to put all the left-hand-side content under the same container, so that it is properly aligned with the corresponding label.