Form Layout - CSS

[liunx]

Just wondering if doing it this way would be adequate. The only thing I can see wrong would be the use of double floats. (ie. row has float and inline style also has float)


CSS:
<style type="text/css">
/*Input Screens*/
div.inputForm{width: 100%;}
div.inputForm h2{width: 100%;}
div.inputForm .formFields{background: #fafafa; font-size: 100%;}
div.inputForm label{font-size: 70%; font-weight: bold; margin-left: 10px;}
div.inputForm p{font-size: 70%;}
div.row{float: left; margin-bottom: 10px;}
div.row span.hint{font-size: 80%; font-weight: normal;}

</style>


XHTML:

<div class="inputForm">
<div class="row">
<div style="float: left; width: 315px; text-align: center;">
<label for="home_score">
Home Score:
<input type="text" name="home_score" id="home_score" size="2" maxlength="2" title="Enter game day" class="formFields" />
</label>
</div>
<div style="float: left; width: 315px; text-align: center;">
<label for="away_score">
Away Score:
<input type="text" name="away_score" id="away_score" size="2" maxlength="2" title="Enter game day" class="formFields" />
</label>
</div>
</div>
</div>I've had good success using the following markup:

<p class="formItems">
<label for="someTextBox">Form input label</label>
<span><input type="text" name="someTextBox" id="someTextBox" /></span>
<span class="spacer">&nbsp;</span>
</p>

... and this CSS:

.formItems label {
float: left;
width: 25%;
}

.formItems span {
margin-left: 25%;
display: block;
}

.formItems .spacer {
margin: 0;
clear: both;
height: 1px;
overflow: hidden;
}

If you have instances where you need more than one form input, use the <fieldset> and <legend> tags.

<fieldset>
<legend>Fieldset title</legend>
<p class="formItems">
<label for="someTextBox">Form input label</label>
<span><input type="text" name="someTextBox" id="someTextBox" /></span>
<span class="spacer">&nbsp;</span>
</p><!-- end form item -->

<p class="formItems">
<label for="someTextBox3">Form input label</label>
<span><input type="text" name="someTextBox" id="someTextBox2" /></span>
<span class="spacer">&nbsp;</span>
</p><!-- end form item -->
</fieldset>