Question

We have an autogen form in php, the way we spit out the checkbox is shown in the code below:

case FIELD_CHECK_BOX:
                $fieldHtml = printCheckbox($mode, $field->getId().'[]', $field->getOptions(), $field->getValue(), true, ' &nbsp', $isReq, array( "class"=>$isReq,$jsFunctionCalls));
            break;

the issue is, if you have five checkboxes for example, they print vertically, but I have a client that has a ton of checkboxes and wants them to print horizontally.

How can I code this to spit the checkboxes out next to each other until say five boxes have been reached and then break to the next line .

HTML Output:

<tr class="tr-11-16 tr-11" id="field-16"><td width='30%' valign='top' align='left' class='labeltext'>Requestor Email :<span style='text-decoration:none' class='required' id='lfspan'> * </span></td><td width='70%' align='left'><table border='0' style='table-layout:auto'><tr><td><div id='td-16[]'><table cellpadding='0' cellspacing='0'><tr><td class="valuetext fld-3-16-required" ><input type="checkbox" name="16[]" id="16[]" value="Home"class="valuetext fld-3-16-required" 0="">Home</td></tr><tr><td class="valuetext fld-3-16-required" ><input type="checkbox" name="16[]" id="16[]" value="Play"class="valuetext fld-3-16-required" 0="">Play</td></tr><tr><td class="valuetext fld-3-16-required" ><input type="checkbox" name="16[]" id="16[]" value="Theatre"class="valuetext fld-3-16-required" 0="">Theatre</td></tr><tr><td class="valuetext fld-3-16-required" ><input type="checkbox" name="16[]" id="16[]" value="Work"class="valuetext fld-3-16-required" 0="">Work</td></tr></table></div></td><td valign='top'></td></tr></table></td></tr>

Answer 1

Easy way is tables.

Better way is to use display:table and its blocks.

Best way would probably be to wrap each checkbox + label in a wrapper element, and give that element 20% width. Then each of those wrapper elements can have either display:inline-block; or display:block; float:left;