How to prevent DIVs from sliding over each other
- by Haghpanah
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> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </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.
