I'm trying to make the following check box go to three columns. I'm reasonably good at CSS programming but getting a handle on this is eluding me; it's just not responding whatever I do.

Any tips for how to make a 2, 3 or 4 column check box? Thanks.

 

here's the xpages code:

    <xp:checkBoxGroup value="#{Report.NaturalSciences}" id="NaturalSciences"
        styleClass="threeColumnCheckboxGroup" style="width:30%">
        <xp:selectItem itemLabel="Biological sciences – Aerobiology"
            itemValue="Biological sciences – Aerobiology">
        </xp:selectItem>
        <xp:selectItem itemLabel="Biological sciences – Bacteriology"
            itemValue="Biological sciences – Bacteriology">
        </xp:selectItem>
        <xp:selectItem
            itemLabel="Biological sciences – Behavioural biology"
            itemValue="Biological sciences – Behavioural biology">
        </xp:selectItem>
        <xp:selectItem
            itemLabel="Biological sciences – Biochemistry &amp; molecular biology"
            itemValue="Biological sciences – Biochemistry &amp; molecular biology">
        </xp:selectItem>
    </xp:checkBoxGroup>

 

 

Here is the source code being generated in the browser.

<fieldset id="view:_id1:NaturalSciences" style="width:30%" class="threeColumnCheckboxGroup">
<table role="presentation" class="threeColumnCheckboxGroup" style="width:30%">
<tr>
<td><label for="view:_id1:NaturalSciences:0"><input id="view:_id1:NaturalSciences:0" name="view:_id1:NaturalSciences" value="Biological sciences &#8211; Aerobiology" type="checkbox">Biological sciences &#8211; Aerobiology</label></td>
<td><label for="view:_id1:NaturalSciences:1"><input id="view:_id1:NaturalSciences:1" name="view:_id1:NaturalSciences" value="Biological sciences &#8211; Bacteriology" type="checkbox">Biological sciences &#8211; Bacteriology</label></td>
<td><label for="view:_id1:NaturalSciences:2"><input id="view:_id1:NaturalSciences:2" name="view:_id1:NaturalSciences" value="Biological sciences &#8211; Behavioural biology" type="checkbox">Biological sciences &#8211; Behavioural biology</label></td>
</tr>
</table>
</fieldset>
 

 

here's my increasingly desperate attempts to try to figure out how to talk to xpages via css.

 

.threeColumnCheckboxGroup { display: inline; };
.threeColumnCheckboxGroup tbody { border: 1px solid red; };
.threeColumnCheckboxGroup tr { float: left; width: 32%; };
.threeColumnCheckboxGroup td { float: left; width: 32%; };
#id1:NaturalSciences td { float: left; width: 32%; };
.threeColumnCheckboxGroup tbody tr td { float: left; width: 32%; };
.threeColumnCheckboxGroup>tbody>tr>td { float: left; width: 32%; };