prevent checkbox label from wrapping to opposite side of page

Question

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.

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?

Answer 1

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