Styling Forms - Pro CSS Techniques - page 247

Figure 11-10. The clear property in CSS helps us ensure all elements are visually contained by
their parent fieldset .
There are a few things that don't work quite right here, though. First, our “State,” “Zip
code,” “Card number,” and “Expiration date” fields are unnecessarily long. Since we can pre-
dict how many characters will go into those fields, it makes sense to set their width accordingly.
Using the em unit, we can size the input fields pretty close to their ideal width. Keeping in
mind that a single em is the size of the widest character in the alphabet (usually a capital “M”),
we'll set the widths to the same number of ems as the number of characters they should contain:
input#state {
width: 2em;
}
input#zip {
width: 5em;
}
input#card_number {
width: 16em;
}
input#expiration {
width: 4em;
}