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

Don't 'move it to the left of its width' - let it dictate its own width and then add padding on the right side if you need it. But judging from your design, you don't.

input[type=checkbox] { width: auto }