How to prevent DIVs from sliding over each other
Posted
by Haghpanah
on Stack Overflow
See other posts from Stack Overflow
or by Haghpanah
Published on 2010-05-06T11:38:38Z
Indexed on
2010/05/06
11:48 UTC
Read the original article
Hit count: 166
css
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.
© Stack Overflow or respective owner
