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

Question

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?

Answer 1

I think the problem that cause your checkbox to be center like that because you set the input width:200px so all you need to do is to add the width:auto to your checkbox by its id(autologin). Also you need to create a div container for your check box. Here is the HTML:

<label for="autologin">Remember Me</label>
<div id='check'><input type="checkbox" class="checkbox" id="autologin" name="autologin" value="1"></div>
<div class="clear"></div>

and here is the CSS:

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

input {
    float: right;
    margin: 5px 0px;
    width: 200px;
    border:solid 1px;
}
#autologin
{
width:auto;
float:left;
}
#check
{
float:right;
width:200px;
border:solid 1px;
}

.clear {
    clear: both;
}

Hope this help :)