4

As you can see in the image below then when the browser window is resized the checkbox labels can wrap to the opposite side of their ascociated checkboxes.
enter image description here
In the image above the label for checkbox 12 has wrapped and is at the opposite side of the screen. How can I make it so that each label stays with its checkbox?

Web_Designer
  • 72,308
  • 93
  • 206
  • 262

2 Answers2

9

Put the checkboxes in the label tags and give the label display: inline-block. Texts can be of any size, the "inline-block" keeps the text and checkbox together.

Demo (Resize your browser so 14 goes to the next line): http://jsfiddle.net/csYPu/

HTML:

<label><input type="checkbox">1</label>
<label><input type="checkbox">2</label>
<label><input type="checkbox">3</label>

CSS:

label {
    display: inline-block;
}
Bazzz
  • 26,427
  • 12
  • 52
  • 69
1

I would group the label and the checkbox in an element (li, div) and float them left.

Example:

css

ul {
  overflow: hidden;
}
li {
  float: left;
}

html

<ul>
  <li><input type="checkbox" name="box1" id="box1" value="1"><label for="box1">1</label></li>
  ...
  <li><input type="checkbox" name="box13" id="box13" value="1"><label for="box13">13</label></li>
</ul>
jeroen
  • 91,079
  • 21
  • 114
  • 132
  • What about the different sizes of labels because the labels increment from 1 to 3 digits? wouldn't I have to specify a width? – Web_Designer Apr 26 '11 at 14:50
  • @inquisitive_web_developer No, as long as you float the containing element - like the `li` in my example - they stay together until the page gets too small to accommodate the individual box and label on one line. – jeroen Apr 26 '11 at 14:56
  • Okay, thanks @jeroen your example works, but I do like the method that @Bazzz provided as it is much simpler. – Web_Designer Apr 26 '11 at 15:07