In order to keep checkbox labels next to the corresponding checkboxes, you can wrap each checkbox and label in a span style="white-space:nowrap". This prevents the text from wrapping to the next line while leaving the checkbox behind on the previous line. If you have multiple of these checkbox/label combinations, wrapping still happens between combinations. (Some browsers like Firefox 3 and Safari 3 require a space character to be present between combinations in order to wrap.)

Unfortunately, in IE8 a space character is not sufficient. Somehow the combination of nowrap and a checkbox make it so no wrapping occurs at all.

A workaround exists, by using a soft hyphen (­) instead of or in addition to a space.


First, a table to show the normal wrapping that occurs:
<span>hello world</span>[space]<span>hello world</span>:

hello world hello world hello world

Now adding nowrap:
<span style="white-space:nowrap">hello world</span>

hello world hello world hello world

Finally, adding input elements.
This table does not look like the others in IE8. No wrapping occurs, and instead the table is stretched horizontally:
<span style="white-space:nowrap"><input type=checkbox>hello world</span>

hello world hello world hello world

Screen shot of IE8:

Workaround: replace [space] with &shy;[space]

hello world­ hello world­ hello world