HTML grid form layout

by eliranmal

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title>CSS Technique Demonstration: Forms</title>

<link rel="stylesheet" type="text/css" href="form_orig_styles.css" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="form_prog_styles_ie.css" /><![endif]-->

</head>
<body>

<h3>Contact Us</h3>

<form id="contactForm" method="post" action="/cgi-bin/generic_email_script.php">
  <ul>
    <li id="nameField" class="required"><label for="realname">Name:</label><input type="text" name="name" value="" class="medium" id="realname" /><span class="note">required</span></li>
    <li id="addressField" class="required"><label for="address">Email:</label><input type="text" name="email" value="" class="medium" id="address" /><span class="note">required</span></li>
    <li id="acctTypeField" class="required"><label for="acctNone">Account type:</label>
        <fieldset>
            <label for="acctGold">Gold</label><input type="radio" name="acct_type" id="acctGold" class="rInput" /><label for="acctSilver">Silver</label><input type="radio" name="acct_type" id="acctSilver" class="rInput"  /><label for="acctBronze">Bronze</label><input type="radio" name="acct_type" id="acctBronze" class="rInput" /><label for="acctNone">None</label><input type="radio" name="acct_type" id="acctNone" class="rInput" checked="checked" />
        </fieldset>
        <span class="note">required</span>
    </li>
    <li id="subjectField"><label for="natureOfInquiry">General subject:</label><select name="subject" class="medium" id="natureOfInquiry">
        <option value="support">Support</option>
        <option value="billing">Accounts &amp; billing</option>
        <option value="press">Press</option>
        <option value="other_q">Other questions</option></select>
    </li>
    <li id="availabilityField"><label for="availability">My account is...

CSS

/* ******** */
/* ELEMENTS */
/* ******** */

html {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 1.714em;
    /*background-image: url(bg_grid.gif);*/
    background-image: url('https://dl-web.dropbox.com/get/CDN/images/bg_grid.gif?w=b7e1d8f4');
    font-size: 14px;
    font-family: Helvetica,Arial,sans-serif;
    line-height: 1.714em;
}

h3 {
    margin: 0 0 1.2em 0;
    border-bottom: .05em solid rgb(0,96,192);
    font-size: 1.429em;
    line-height: 1.15em;
}

form {
    margin: 0;
    width: 35.929em;
}

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

li {
    clear: both;
    height: 1.714em;
    margin: 0;
}

fieldset {
    height: 1.429em;
    margin: 0 0 -.143em 0;
    border: 0;
}

label {
    display: block;
    float: left;
    clear: left;
    width: 10.286em;
    overflow: auto;
    padding-right: 1.714em;
    text-align: right;
}

input {
    height: 1.143em;
    border: .071em solid rgb(96,96,96);
    padding: .071em;
    line-height: .929em;
}

textarea {
    height: 4.714em;
    margin-bottom: .286em;
    border: .071em solid rgb(96,96,96);
    padding: 0;
}

select {
    display: block;
    float: left;
    height: 1.571em;
    font-family: Futura,'Century Gothic',sans-serif;
}

option {
    font-size: 100%;
}

   input,
textarea {

    display: block;
    float: left;
    overflow: hidden;
    font-family: Futura,'Century Gothic',sans-serif;
    font-size: 1em;
}

   input,
textarea,
  select {

    margin-top: 0;
    font-size: 100%;
}

/* ************************* */
/* INPUT & TEXTAREA VARIANTS */
/* ************************* */

.medium {
    width: 11.714em;
}

select.medium {
    width: 12em;
}

.long {
    width: 20.429em;
}

.rInput {
    border: 0;
}

/* ******* */
/* BUTTONS */
/* ******* */

input.submitButton {
    display: block;
    clear: both;
    width: 7.2em;
    height: 2em;
    margin: 0 0 0 16.8em;
    border: 1px solid rgb(128,128,128);
    padding: 0;
    font-size: 10px;
   ...