How to switch from table to div for FORM layout?

css, forms, html, html-table

Solution

Consider this article at Woork titled Clean and Pure CSS Form Design

I've implemented this style, including the `fieldset` and tweaked all the styles appropriately for the look/feel that was required.

Consider using `<label runat="server">` to inherit the style of the label via CSS instead of `asp:label`. Alternatively you could put your `asp:label` within `label` tags. Since `asp:label` emits `<span>`, that would simply result in a set of `<label><span></span></label>`.

Problem

I'm noticing most folks are talking about using DIVs and CSS for label, textbox pairs. How would one convert a table such as: ``` <table> <tr> <td><some Label1> </td> <td><some TextBox1> </td> </tr> <tr> <td><some Label2> </td> <td><some TextBox2> </td> </tr> ... </table> ``` From using a table into say a div with CSS, a sample would be helpful! Currently I was using a table for such a thing, imagine say a site that just displays some user information. How would I display the pairs (the label, the text box) using DIVs rather than table format? Assume the labels / textbox's are ASP.net labels and textboxes.

Original source