Formatting elements in columns and rows

Question

To avoid reinventing the wheel, I am generating a form using CakePHP's form helper, which create the following markup:

    <div class="input select"><label for="ReportFruit">Fruit</label>
        <input type="hidden" name="data[Report][Fruit]" value="" id="ReportFruit" /> 

<div class="checkbox"><input type="checkbox" name="data[Report][Fruit][]" value="0" id="ReportFruit0" /><label for="ReportFruit0">Banana</label></div> 
<div class="checkbox"><input type="checkbox" name="data[Report][Fruit][]" value="1" id="ReportFruit1" /><label for="ReportFruit1">Apple</label></div> 
<div class="checkbox"><input type="checkbox" name="data[Report][Fruit][]" value="2" id="ReportFruit2" /><label for="ReportFruit2">Pear</label>
...
</div> 
</div>​

Which generates a bunch of checkboxes in this format:

[] Banana
[] Apple
[] Pear
[] ...

I would like to format them so they display like so: (ideally I would still be able to set the number of options per row, but if not it's fine too)

[] Banana    [] Apple     [] Pear
[] Mango     [] Lemon     [] ...

Can I accomplish this using CSS only or would I have to manipulate the DOM using JS (or change the markup with PHP before I output it)?

Answer 1

You can use the following CSS:

div.checkbox { float: left; width: 31%; margin-right: 1% }

(the 1% is for rounding issues; decrease the width and increase margin-right as you see fit. You can also use Pixel values of course)

This will distribute the check boxes and their labels across three columns. However, with long labels that wrap across multiple lines, you may get distribution issues (try it out to see what I mean).

To prevent that, give every 3rd column the additional class newline:

<div class="checkbox newline">

and define in CSS:

div.checkbox.newline { clear: left }