Question

I am trying to replicate this table structure by using div.

<asp:Table ID="tblAnnualReportServiceForm" runat="server" Width="100%" CellSpacing="1" CellPadding="5">
    <asp:TableRow >
        <asp:TableCell HorizontalAlign="Left">
            <asp:Table ID="Table1" runat="server" CellSpacing="1" CellPadding="5">
                <asp:TableRow>
                    <asp:TableCell>
                        <asp:Label ID="lblStartDate" runat="server" Text="Start Date"></asp:Label>
                    </asp:TableCell>
                    <asp:TableCell>
                        <asp:TextBox ID="txtStartDate" Width="130px" runat="server"></asp:TextBox>
                    </asp:TableCell>
                </asp:TableRow>
                <asp:TableRow >
                    <asp:TableCell>
                        <asp:Label ID="lblEndDate" runat="server" Text="End Date"></asp:Label>
                    </asp:TableCell>
                    <asp:TableCell>
                        <asp:TextBox ID="txtEndDate" runat="server" Width="130px" style="text-align:left" ValidationGroup="MKE" />
                    </asp:TableCell>
                </asp:TableRow>             
            </asp:Table>
        </asp:TableCell>
    </asp:TableRow>
</asp:Table>

I have tried the following DIV and I haven’t have much CSS experience.

<div>
    <div  style="float:left">
         <asp:Label ID="Label1" runat="server" Text="Start Date"></asp:Label>
    </div>
    <div>
        <asp:TextBox ID="TextBox1" Width="130px" runat="server"></asp:TextBox>
   </div>    
   <div>
        <asp:Label ID="Label2" runat="server" Text="End Date"></asp:Label>
        <asp:TextBox ID="TextBox2" runat="server" Width="130px" style="text-align:left" ValidationGroup="MKE" />
  </div>
</div>  

Any pointers would be of great help. I have too many table structure that needs to be converted to DIV. I appreciate the help

Answer 1

You can do something like this:

<div>
    <div style="clear:both;">
        <div style="float:left;width:50%;">
            <asp:Label ID="lblStartDate" runat="server" Text="Start Date"></asp:Label>
        </div>
        <div style="float:left;width:50%;">
            <asp:TextBox ID="txtStartDate" Width="130px" runat="server"></asp:TextBox>
        </div>
    </div>
    <div style="clear:both;">
        <div style="float:left;width:50%;">
            <asp:Label ID="lblEndDate" runat="server" Text="End Date"></asp:Label>
        </div>
        <div style="float:left;width:50%;">
            <asp:TextBox ID="txtEndDate" runat="server" Width="130px" style="text-align:left" ValidationGroup="MKE" />
        </div>
    </div>
</div>

If you want to get some paddings/margins you can add another div into a cell div:

<div style="float:left;width:50%;">
    <div style="border:solid 1px black;padding:5px;margin:1px;">                
            <asp:Label ID="lblStartDate" runat="server" Text="Start Date"></asp:Label>
    </div>
</div>

JsFiddle DEMO or here is a demo with classes (using style is not a very good idea, so I created few classes and removed styles from div tags)