Follow up on "Best Practice for forms layout -- table or flow?"

For example, consider this simple html layout http://jsfiddle.net/roger_davis/7h3bC/4/ How would you recommend modifying the html so that the labels lined up as expected (and were on the left.)

I h开发者_如何学运维ad a look, and nearly every web site I looked at used table layout here. For example, for profile editing right here on stackoverflow your profile input form is laid out in a table. Google logon page is a table, yahoo enroll doesn't use a table but does use a hard coded width.

Am I missing something?

Here is my update to your fiddle: http://jsfiddle.net/7h3bC/9/ basically define HTML:

<ul class='controls'>
    <li> <input type="checkbox" name="mycheckbox" id='mycheckbox'></li>
    <li><input type="text" name="myInput" id='myInput'></li>
</ul>
<ul class='labels'>
    <li> <label for="mycheckbox" >Tick me if you dare</label></li>
    <li><label for="mycheckbox">  Tick me if you dare</label></li>
</ul>

and css

<style>
.controls,
.labels
{
    float:left;
}
.controls 
{
     padding-right:5px;
     text-align:right;
}

</style>

I'm not sure how good the browser support on this is, tested in FF4: http://jsfiddle.net/shanethehat/7h3bC/11/

<div id="tableForm">
    <div class="tableRow">
        <div class="tableCell">
            <label for="mycheckbox">  Tick me if you dare</label>
        </div>
        <div class="tableCell">
            <input type="checkbox" name="mycheckbox" id="mycheckbox">
        </div>
    </div>
    <div class="tableRow">
        <div class="tableCell">
            <label for="mytext">  Give me some text test test</label>
        </div>
        <div class="tableCell">
            <input type="text" name="mytext" id="mytext">
        </div>
    </div>
</div>


div#tableForm {
 display:table;   
}
div.tableRow {
  display:table-row;  
}
div.tableCell {
    display:table-cell;   
    width:inherit;
}

Yes, I know, I've just created a table using divs. The point though is that this is nicely accessible and semantically proper.

Edit: fails miserably in IE7 where fixed width would be the only way, but 8 and 9 seem OK.

Edit2: switched the label/fields around and set right align: http://jsfiddle.net/shanethehat/7h3bC/12/. The markup is getting a little class heavy at this point. :first-child would be an alternative to using the left class, but at the expense of IE8.