How to implement DIV for this table structure - asp.net

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

A general structure to replicate table is like.
<!--table-->
<div>
<!--tr-->
<div style="clear:both"></div>
<!--td-->
<div style="float:left">
</div>
<!--td-->
<div style="float:right">
</div>
<!--tr-->
<div style="clear:both"></div>
<!--td-->
<div style="float:left">
</div>
<!--td-->
<div style="float:right">
</div>
<!--tr-->
<div style="clear:both"></div>
</div>

Answer 2

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)

Answer 3

Check out:
1.) YUI Grids - for Tableless design
The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations.
2.) 960 Grid System: The premise of the system is ideally suited to rapid prototyping, but it would work equally well when integrated into a production environment. There are printable sketch sheets, design layouts, and a CSS file that have identical measurements.