Form Layouts With CSS

Lay­ing out forms with Cas­cad­ing Style Sheets (CSS) is a com­plex topic. In light of many devel­op­ers doing their first over­all CSS lay­outs they often bail when it comes to lay­ing out forms with CSS and avoid­ing both tables and line breaks. The code exam­ple shows the following:

1. Well-formed, seman­tic markup
2. CSS for lay­out 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 sim­ply use the CSS “clear” prop­erty. This prop­erty says: “clear all floated ele­ments to the x side of me”. So for clear: left; means that there should be no floated ele­ments to the left of the ele­ment, and I use this in lay­ing out the form.

Here is the CSS, but be sure to check out the full exam­ple.

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;
}