checkbox group layout personalization

Hi,
I'm using chronoform 4 and I'm trying to change the way a checkbox group looks on the website.
Here is how it is:


I would like to change the "formation" group to have only two items on the first line and the two others on the second line. If they could be aligned vertically, it would be perfect but I'll settle for less.

The best I could achieve is this, by adding a simple </br> after second label in the code :


I'm guessing I need to change the class attribute but css is pretty new to me so i'm a bit lost.
Here is the code for this section. I apologize in advance, I'm pretty sure the answer is already somewhere in the forum, but I could find it (and I looked for a few hours).

<div class="ccms_form_element cfdiv_checkboxgroup" id="formation1_container_div" style="">
<label>Formation</label>
<input type="hidden" name="formation" value="" alt="ghost" />
<div style="float:left; clear:none;">

<input type="checkbox" name="formation[]" id="formation_0" title="" value="formation longue 1er cycle, 1ère année" class="" />
<label for="formation_0">1er cycle, 1ère année</label>

<input type="checkbox" name="formation[]" id="formation_1" title="" value="formation longue 1er cycle, 2ème année" class="" />
<label for="formation_1">1er cycle, 2ème année</label>
</br>

<input type="checkbox" name="formation[]" id="formation_2" title="" value="formation longue 2ème cycle, 1ère année" class="" />
<label for="formation_2">2ème cycle, 1ère année</label>

<input type="checkbox" name="formation[]" id="formation_3" title="" value="formation longue 2ème cycle, 2ème année 2015" class="" />
<label for="formation_3">2ème cycle, 2ème année 2015</label>
</div><div class="clear"></div><div id="error-message-formation"></div></div>

Thank you for any help.

Damien

Hi damston,

The simplest way to do this is to copy and paste this HTML into a Custom Element element in your form then edit the HTML to get exactly the layout you need.

Bob

Thank you, I'll try that :-)