title: How to prevent DIVs from sliding over each other
body: <p>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. </p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>,</p>
  
  <pre><code>&lt;div class="FormItem"&gt;
      &lt;div class="ItemLabel"&gt;
              &lt;asp:Label ID="lblName" runat="server" Text="Name :"&gt;&lt;/asp:Label&gt;
          &lt;/div&gt;
          &lt;div class="ItemTextBox"&gt;
              &lt;asp:TextBox ID="txtName" runat="server"&gt;&lt;/asp:TextBox&gt;
              &lt;p&gt;&lt;span&gt;User Name&lt;/span&gt;&lt;/p&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="FormItem"&gt;
          &lt;div class="ItemLabel"&gt;
              &lt;asp:Label ID="lblComments" runat="server" Text="Comments :"&gt;&lt;/asp:Label&gt;
          &lt;/div&gt;
          &lt;div class="ItemTextBox"&gt;
          &lt;asp:TextBox ID="txtComments" runat="server"&gt;&lt;/asp:TextBox&gt;
              &lt;p&gt;&lt;span&gt;(optional)Comments&lt;/span&gt;&lt;/p&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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…</p>
  
  <pre><code>&lt;div class="FormItem"&gt;
      &lt;div class="ItemLabel"&gt;
          &lt;asp:Label ID="lblName" runat="server" Text="Name :"&gt;&lt;/asp:Label&gt;
      &lt;/div&gt;
      &lt;div class="ItemTextBox"&gt;
          &lt;asp:TextBox ID="txtName" runat="server"&gt;&lt;/asp:TextBox&gt;
          &lt;p&gt;&lt;span&gt;User Name&lt;/span&gt;&lt;/p&gt;
          &lt;p&gt;&amp;nbsp;&lt;/p&gt;
          &lt;p&gt;&amp;nbsp;&lt;/p&gt;
          &lt;p&gt;&amp;nbsp;&lt;/p&gt;
          &lt;p&gt;&amp;nbsp;&lt;/p&gt;
          &lt;p&gt;&amp;nbsp;&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="FormLabel"&gt;
      &lt;div class="ItemText"&gt;
          &lt;asp:Label ID="lblComments" runat="server" Text="Comments :"&gt;&lt;/asp:Label&gt;
      &lt;/div&gt;
      &lt;div class="ItemTextBox"&gt;
      &lt;asp:TextBox ID="txtComments" runat="server"&gt;&lt;/asp:TextBox&gt;
          &lt;p&gt;&lt;span&gt;(optional)Comments&lt;/span&gt;&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>