Form Layouts With CSS

Laying out forms with Cascading Style Sheets (CSS) is a complex topic. In light of many developers doing their first overall CSS layouts they often bail when it comes to laying out forms with CSS and avoiding both tables and line breaks. The code example shows the following:

1. Well-formed, semantic markup
2. CSS for layout and presentation
3. Ensure that the form is both usable (easy to read/use) and presentable
4. No tables or line breaks

To avoid the line breaks we simply use the CSS “clear” property. This property says: “clear all floated elements to the x side of me”. So for clear: left; means that there should be no floated elements to the left of the element, and I use this in laying out the form.

Here is the CSS, but be sure to check out the full example.

body {
font: 13px "Myriad Pro", serif;
}
fieldset {
width: 300px;
padding: 10px;
}
legend {
font-weight: bold;
}
label, select, textarea, input {
float: left;
font: inherit;
border: 1px solid #ccc;
margin-bottom: 15px;
}
fieldset *:hover, fieldset *:focus {
background-color: #eee;
}
label:hover, legend:hover {
background-color: transparent;
}
label {
width: 75px;
clear: left;
font-weight: bold;
border: none;
}
input[type="submit"] {
clear: left;
margin-top: 10px;
margin-left: 75px;
}
textarea {
width: 200px;
height: 75px;
}