How to place checkboxes side by side?

Question

I'm using label-input pairs, with the following style for labels, but when I use two CheckBox controls on the same line, the checkbox labels (control prop[erties, not separate Label controls) appear together, to the left of the two checkboxes.

    label
    {
        float: left;
        width: 150px;
        padding-right: 10px;
        text-align: right;
    }

Answer 1

The labels appear together because of the float: left rule. You could define different css rule for checkbox labels which don't align to the left of the input.

Answer 2

Check out the rendered html using view source. You'll probably find that the label of the checkboxes ARE rendered as separate labels, not part of the checkbox. Try wrapping each of your Checkbox controls in a div.

Answer 3

As Kirschstein said, you could wrap your input/label pairs in a div and then float the divs.

Or you could apply floats to the inputs as well as the labels. This last suggestion assumes your code looks something like:

<label for="input1">Input 1</label>
<input type="checkbox id="input1" name="input1" />
<label for="input2">Input 1</label>
<input type="checkbox id="input2" name="input2" />

Answer 4

Just remove the "float:left" css rule. Labels and inputs are rendered as inline elements, so they will be on the same line "by default".

Answer 5

If the idea is to give the labels width you could set them to "display: inline-block" but this may not fully work with some older browser.

http://www.quirksmode.org/css/display.html