Instead of using table-based layout, I have decided to go with a DIV-based layout in order to streamline the markup and improve page load speed. However, as I am not an expert in CSS, I find it quite challenging. Below are the CSS classes I am currently using to create rows that mimic a table structure, with one column for labels and another for textboxes.
.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>
If the height of ItemData DIVs exceeds the min-height set for FormItem DIVs, the alignment between ItemText and ItemData may be compromised. Here is an example of the issue:
<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 have experimented with various CSS attributes such as position, float, clear, but have been unable to resolve the issue. Any assistance would be highly appreciated.