Form Positioning Without Tables
This topic has been discussed everywhere. However, some of the solutions aren’t much better than a table. Such as:
<div class="row">
<div class="left">
<label for="fname">First Name</label>
</div>
<div class="right">
<input name="fname" id="fname" type="text" />
</div>
</div>
Which is then styled with something like:
.row{
clear:both;
width:300px;
}
.left{
display:block;
float:left;
width:100px;
text-align:right;
}
.right{
display:block;
float:right;
width:180px;
text-align:left;
}
Looks like a table in disguise to me.
So what’s another option? Well, I use something very similar, however I choose to use the elements that are already available. Using the form element in place of the row class used above and seperating form inputs by <p> tags we end up with something like this for the CSS…
<style type="text/css">
<!--
form{
width:225px;
display:block;
clear:both;
}
label{
width:75px;
float:left;
text-align:right;
padding:0 3px 0 0;
}
input{
text-align:left;
}
form p{
margin:0 0 5px 0;
text-align:left;
}
#controls{
text-align:right
}
-->
</style>
And this for XHTML…
<form name="myform" id="myform" action="submitpage.htm" method="post">
<p>
<label for="fname">First Name</label>
<input name="fname" type="text" id="fname" size="20" />
</p>
<p>
<label for="lname">Last Name</label>
<input name="lname" id="lname" type="text" />
</p>
<p id="controls">
<input name="Reset" id="submit" type="reset" value="Reset" />
<input name="submit" id="submit" type="submit" value="submit" />
</p>
</form>
I threw in an extra class for the last paragraph to make the buttons line up on the right side of the form. Works for me. How about you?