Cross-browser CSS for right align label position of textfield

I'm using rightToLeft language for my UI, so I need to have label of textfield on right side. I tried using div with float:right for label and div with float:left for textfield. but it still doesn't align correctly in my form.

This is code sample:

<s:form action="processRegister" cssClass="form">
    <div style="float:right;text-align:right">
        <s:text name="label12.msg"/>
    </div>
    <div style="float:left">
        <s:textfield name="username" cssClass="textfield" />
    </div>

    <div开发者_C百科 style="float:right;text-align:right">
        <s:text name="label13.msg"/>
    </div>
    <div style="float:left">
        <s:password id="password1" name="password" cssClass="textfield"/>
    </div>
</s:form>

and when I used table and tried to put textfield on one column and label on the other column, they didn't align on one line.

In what way is it not aligning properly? can show us some screenshot and example of codings? U wanna check your magin and padding of each field that is not aligning properly? Make the margin and padding to 0 first.

Actually another way is to use a table, if it applies to you. Inside individual cell, just make sure the padding/ margin is 0. Then using the cell's alignment property to adjust the align problem. From what I see, using table for form to align is definitely cross browser

This jsfiddle does what you want. The key is in clearing your floats so that all the input/label rows end up on their own distinct lines. It's also a good idea when using floats to specify widths on your elements whenever possible. This will prevent accidental float drop.

Also, for usability, I've added a <label> element so screen readers will know which <input>'s your labels apply to.

HTML

<form>
    <div>
        <label for="username">Username</label>    
        <input type="text" id="username" name="username" size="20"/>
    </div>
    <div>
        <label for="password">Password</label>   
        <input type="password" id="password" name="password" size="20"/>
    </div>
</form>

CSS

div {
    clear: both;
    width: 300px;
}

div label {
    float: right;
    text-align: right;
}

div input {
    float: left;
}