Cross-Browser Layout Techniques - Beginning CSS3 - page 283

form p, fieldset {
display: table-row;
}
4. Convert all the input and <label > elements to display as cells. Also give them some
margins and padding, and make sure any text is vertically aligned to the top of the
cell. Create the following style rule:
label, input, select, textarea {
display: table-cell;
vertical-align: top;
padding: 3px;
margin: 6px;
}
5. Save the style sheet, and test the form in a browser. As Figure 12-16 shows, the
input fields and labels are neatly aligned in columns, but the <fieldset > needs
fixing. Also, the submit button looks out of place in the left column.
Figure 12-16. The CSS table layout is beginning to take shape
6. The <fieldset > contains a <legend > and a paragraph containing all the radio
buttons. Ideally these should be displayed as cells. So, add them as selectors to the
style rule you created in step 4:
label, input, select, textarea , legend, fieldset p {
display: table-cell;
vertical-align: top;