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).