May 7, 2008

tableless form using div tags

div.row {
clear: both;
padding-top: 5px;
}

div.row span.label {
float: left;
width: 100px;
text-align: right;
}

div.row span.formw {
float: right;
width: 235px;
text-align: left;
}


<div style="width: 360px; background-color: #ccc;
border: 1px dotted #333; padding: 5px;
margin: 0px auto;">
<form>
<div class="row">
<span class="label">Name:</span><span
class="formw"><input type="text" size="25" /></span>

</div>
<div class="row">
<span class="label">Age:</span><span
class="formw"><input type="text" size="25" /></span>
</div>

<div class="row">
<span class="label">Shoe size:</span><span
class="formw"><input type="text" size="25" /></span>
</div>
<div class="row">

<span class="label">Comments:</span><span
class="formw">
<textarea cols="25" rows="8">
Go ahead - write something...
</textarea>
</span>
</div>

<div class="spacer">
&nbsp;
</div>
</form>

</div>

0 comments: