Now I don’t want my web page to be primarily about my web page… But hopefully I can save someone the time I spent figuring this one out.
The basic idea I had was to left-float the labels and right-align the input elements within row-like divs. This results in the labels aligned to the left and the input elements to the right. Good.
The trick after that is to get the form to collapse down to the width of its contents, the way a table does, instead of expanding to 100% the way a div does. “display: table” works in Opera and Firefox. In IE, left-floating it gets the effect, but this messes up Opera. Putting both makes all three browsers work.
This gives a good effect in every browser I’ve tested, doesn’t break when fonts resize, and keeps the HTML entirely semantic.
.myForm {float: left;display:table;margin: 0px; text-align: right;}
.myForm div {clear: both;}
.myForm label {float: left; margin-right: 10px;}
.myForm input {width: 300px;}
.myForm textarea {height: 100px; width: 300px;}<form method="post" action="" class="myForm">
<div><label for="name">Name</label><input type="text" name="name" id="name "value="" /></div>
<div><label for="email">Email</label><input type="text" name="email" id="email" value="" /></div>
<div><label for="link">Link</label><input type="text" name="link" id="link" value="" /></div>
<div><label for="comment">Comment</label><textarea name="comment" id="comment"></textarea></div>
<div><input type="submit" value="Submit" /></div>
</form>
<div style="clear: both;"></div>
The clear:both thing can be fixed in Firefox and Opera with an “.myform::after { content: ' '; display: block; clear: both; }”
I think that IE does this automatically (and incorrectly), but in this case that’s a good thing.