Question

Hi I’m trying to align two set of checkboxes in form side by side and make the checkboxes align nicely but everytime I get the checkboxes side by side the one on the right will be mess up depend on the text size on the left

so I’m wondering if there is a way

here is the code

UPDATE THE BROKEN CODE.

http://jsfiddle.net/Ysf7t/1/

Answer 1

Easiest way would be to give the names (i.e. “Soccer”, “Mercedes”, etc.) a fixed width through CSS.

Basically something like this:

<h1>Sports</h1>

<div>
    <input type='checkbox' name='system_type17' value='2' />
    <input type="checkbox" name="system_type3" value="5" />
    <span style="width:100px;display:inline-block;">Soccer</span>
    <input type='checkbox' name='system_type17' value='2' />
    <input type="checkbox" name="system_type3" value="5" />
    <span style="width:100px;display:inline-block;">Mercedes</span>
</div>           
<div>
    <input type='checkbox' name='system_type18' value='3' />
    <input type='checkbox' name='system_type4' value='4' />
    <span style="width:100px;display:inline-block;">Mercedes</span>
    <input type="checkbox" name="system_type7" value="2" />
    <input type="checkbox" name="system_type8" value="3" />
    <span style="width:100px;display:inline-block;">Mercedes</span>
</div>

Of course, ideally, the CSS shouldn’t be inline. But I hope you get what I mean.