Styling columns in form - css

Question

I have the following form. How do I create this look without <table>. Thanks
<table>
<tr><td><label for="firstname">First Name</label></td><td><input type="text" name="firstname" id="firstname" /></td></tr>
<tr><td><label for="lastname">Last Name</label></td><td><input type="text" name="lastname" id="firstname" /></td></tr>
<tr><td><label for="phone">Phone</label></td><td><input type="text" name="phone" id="phone" /></td></tr>
<tr><td><label for="email">Email</label></td><td><input type="text" name="email" id="email" /></td></tr>
<tr><td><label for="address">address</label></td><td><input type="text" name="address" id="address" /></td></tr>
<tr><td><label for="city">City</label></td><td><input type="text" name="city" id="city" /></td></tr>
<tr><td><label for="State">state</label></td><td><input type="text" name="state" id="state" /></td></tr>
</table>

Answer 1

This enough for basic styling:
input {
display: block;
}
label {
width: 100px; /* whatever value you wish */
float: left;
}
You can see how this works at http://dabblet.com/gist/2794359
.label {width:30px;} certainly won't do it. First of all, because when you write .label, that selects elements having a class called label. Secondly, even if you didn't use the dot, the label element is by default an inline element, so setting a width on it is useless if you don't give it a display: block as well (floating it also does the trick).

Answer 2

You can use this styles:
CSS markup:
.divContainer
{
display: table;
}
.divRow
{
display: table-row;
}
.divColumn
{
display: table-cell;
}
HTML markup:
<div class="divContainer">
<div class="divRow">
<div class="divColumn">
<label for="firstname">First Name</label>
</div>
<div class="divColumn">
<label for="lastname">Last Name</label>
</div>
</div>
</div>

Answer 3

Sample HTML:
<div id="container">
<div class="row">
<div>
<label for="firstname">First Name</label>
</div>
<div>
<input type="text" name="firstname" id="firstname"/>
</div>
</div>
<div class="row">
<div>
<label for="lastname">Last Name</label>
</div>
<div>
<input type="text" name="lastname" id="firstname"/>
</div>
</div>
<div/>
CSS:
.row {
width: 100%;
}
.row > div:first-child {
width: 20%;
float: left;
}
.row > div:last-child {
float: left;
width: 80%;
}
jsFiddle: http://jsfiddle.net/Q4g2u/1/
​

Answer 4

Apart from religious-like issues, there is no reason to format tabular data such as a form without using table markup. But if you must, the technique described in the answer of Luis Sánchez comes closest – but it is just simulating tables in CSS, with more limited browser support.