How to place list of checkboxes on a row

[newcoder1010]

Hi,

 

 

When I go to my page, I see the list of checkboxes display on a single column. Instead, I like to place them on a row. I like to put 3 items on a each row. As many row needed. How can I place them on a row?

 

 

I have this code:

<div id="edit-submitted-options-body" class="form-checkboxes">
<div class="form-item form-item-submitted-options-body-2-door form-type-checkbox checkbox">
 <label class="control-label" for="edit-submitted-options-body-1">
   <input type="checkbox" id="edit-submitted-options-body-1" name="submitted[options][body][2 Door	]" value="2 Door	" class="form-checkbox">	2 Door </label>

</div>

<div class="form-item form-item-submitted-options-body-extended-cab form-type-checkbox checkbox"> <label class="control-label" for="edit-submitted-options-body-2"><input type="checkbox" id="edit-submitted-options-body-2" name="submitted[options][body][Extended Cab	]" value="Extended Cab	" class="form-checkbox">	Extended Cab </label>
</div>


<div class="form-item form-item-submitted-options-body-3-door form-type-checkbox checkbox"> <label class="control-label" for="edit-submitted-options-body-3"><input type="checkbox" id="edit-submitted-options-body-3" name="submitted[options][body][3 Door	]" value="3 Door	" class="form-checkbox">	3 Door </label>
</div>


........

</div>

If you would like to see my page, http://godrupal.info/xpressauto/?q=node/99. Please scroll to options section. I like to place all check boxes on a row basis. If I can do one, I hope I can do rest. Please advise.

 

Thanks.

[newcoder1010]

Never mind. I fixed it.

[newcoder1010]

This is the css I applied:

.webform-component-checkboxes {display: inline-block;}
.webform-component-checkboxes .form-item {width:30%; float:left;}

I fixed it but I have a question. I am not sure why first column- second row always empty of all the lists. If you could visit my page and help.