Form Layout CSS

There has been much discussion with how to layout forms using CSS. I for one have found a solution that works for me and at least some of the client websites I've worked on.

The following is one example:

<form>
 <fieldset>
    <legend>Personal Details</legend>

    <div class="row">
       <div class="col">
          <label for="firstname">First Name:</label>
          <input type="text" id="firstname" />
       </div>

       <div class="col narrow">
          <label for="middleInitial">M:</label>
          <input type="text" id="middleInitial" />
       </div>
       <div class="col last">

          <label for="lastname">Last Name:</label>
          <input type="text" id="lastname" />
       </div>
    </div>

    <div class="row">

       <div class="col wide last">
          <label for="address">Address:</label>
          <input type="text" id="address" />
       </div>
    </div>

 </fieldset>
</form>

With CSS such as:

fieldset {
  padding:2em;
  width:43em;
     w\idth:39em;}
form .row{
  clear:both; }
form .col{
  float:left;
  width:15em;
  margin-right:2em; }
form .col.narrow {
  width:5em; }
form .col.wide {
  width:39em; }
form .col.last {
  margin-right:0; }
form .col label {
  display:block; }
form .col input[type="text"] {
  background-color:#DDD;
  width:14.5em;}
form .col.narrow input[type="text"] {
  width:4.5em;}
form .col.wide input[type="text"] {
  width:38.5em;}

Results in a page looking like:

http://examples.chadlindstrom.ca/xhtml-css-forms/

Other Reading

• Form layout with CSS: a short literature study
• Accessible Forms
• SimpleQuiz › Part VI › Form(atting)
  • SimpleQuiz › Form(atting) › Conclusion
• In Defence Of Tables For Form Layout
• Clagnut: Form Layout
• FORM(s) and Function
• Styling Forms
• CSS forms can work!
• Tableless forms
• XHTML Form Layout
• Accessible, stylish form layout