Styling Forms - Pro CSS Techniques - page 251

<input id="country" name="country" type="text" />
<br />
</fieldset>
<fieldset id="payment">
<legend>Payment option</legend>
<fieldset id="credit_card">
<legend>Credit card</legend>
<label for="visa">Visa</label>
<input id="visa" name="visa" type="radio" />
<label for="mastercard">Mastercard</label>
<input id="mastercard" name="mastercard" type="radio" />
<label for="discover">Discover</label>
<input id="discover" name="discover" type="radio" />
<br />
</fieldset>
<label for="card_number">Card number</label>
<input id="card_number" name="card_number" type="text" />
<label for="expiration">Expiration date</label>
<input id="expiration" name="expiration" type="text" />
<br />
<input class="submit" type="submit" value="Submit" />
<br />
</fieldset>
</form>
Although the difference is small, it is significant in our styling. Now, when we position
a label element, it won't also move the associated input element. With that in mind, let's apply
the following CSS:
label {
display: block;
float: left;
clear: left;
width: 9em;
padding-right: 1em;
text-align: right;
line-height: 1.8em;
}
input {
display: block;
float: left;
}
br {
clear: both;
}