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?

Solution 1

try this , here's the demo link

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

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

}

.clear {
    clear: both;
}

Solution 2

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 }

Solution 3

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 :)

Solution 4

You should remove float: right; and width: 200px; in your input class declaration. And I would set widths for all labels (i.e. 200px) to align the second column.

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

input {
    /*float: left;*/   /* This will also work. */
    margin: 5px 0px;
}

.clear {
    clear: both;
}

See jsFiddle Example.

View more solutions