CSS Forms - 2

by rajeshpillai

HTML

<div class="form">
    <h1>A Simple Tableless Form</h1>

    <span>Name</span>
    <input type="text" /><br />

    <span>Property Address</span>
    <input type="text" class= "threecol"  />
    
    <span>Property Address-2</span>
    <input type="text" class= "threecol"  />
    
    <span>Property Address-3</span>
    <input type="text" class= "threecol"  />
    
    
    <br />

    <span>City</span>
    <input type="text" />

    <span class="normal short">State</span>
    <select>
        <option value="FL">FL</option>
    </select>

    <span class="normal short">Zip</span>
    <input class= "extend" type="text" size="14" /><br />

    <span>Email</span>
    <input  type="text" size="65" /><br />

    <span>Message</span><br />
    <textarea cols="65" rows="10"></textarea><br />

    <input type="button" value="Submit" />
</div>

CSS

.form
{
    width;400px;
}
.form span
{
    float: left;
    width: 120px;
    clear: both;
}
.form .normal
{
    width: 120px;
    float: none;
}
.form .short
{
    width: 50px;
}
.form input, .form select, .form textarea
{
    margin-top: 2px;
    margin-bottom: 2px;
}

.form input.extend {
    position:relative;
    width: 152px;
}
.form input.threecol {
   width:70px;
   float:left;
   clear:both;
}