Cross-browser CSS for right align label position of textfield

Question

Hi.

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 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.

Answer 1

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

Answer 2

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;
}