CODEWITHSUNDEEP
asp.netcss
ProfK
ProfK

Reputation: 51063

How to place checkboxes side by side?

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;
    }

Upvotes: 1

Views: 4642

Answers (5)

Fishcake
Fishcake

Reputation: 10754

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

Upvotes: 0

Alsciende
Alsciende

Reputation: 26971

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".

Upvotes: 0

skybondsor
skybondsor

Reputation: 747

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" />

Upvotes: 0

Kirschstein
Kirschstein

Reputation: 14868

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.

Upvotes: 0

Darin Dimitrov
Darin Dimitrov

Reputation: 1038730

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.

Upvotes: 1

Related Questions