Move HTML checkbox to left hand side of it's width

checkbox, css, css-float, forms, html

Solution

try this , here's the demo link

label {
    float:left;
    margin: 5px 0px;
}

input {
    // float right;
    margin: 5px 0px;
    width: 200px;

}

.clear {
    clear: both;
}

Problem

I cannot use any JavaScript and would like an answer in just CSS if possbile. I have the following check box in a form: ``` <label for="autologin">Remember Me</label> <input type="checkbox" class="checkbox" id="autologin" name="autologin" value="1"> <div class="clear"></div> ``` with the following CSS: ``` label { float: left; margin: 5px 0px; } input { float: right; margin: 5px 0px; width: 200px; } .clear { clear: both; } ``` What CSS can I add to the check-box to make it appear on the left hand side of its 200px width? I'm having a bit of a hard time with floats (vertical alignment in particular) but I hear it's the correct practice. EDIT: OK so a lot of people are suggesting not floating the inputs to the right. If so I may as well not use float at all and just set the width of the label and have a after each line. Would this be acceptable practice or am I just miss-using floats here?

Original source