title: Grouping checkboxes css in multiple column layout
body: <p>I have the following html</p>
  <pre><code>&lt;fieldset class=&quot;group&quot;&gt; 
  &lt;legend&gt;Select standard pizza toppings&lt;/legend&gt; 
  &lt;ul class=&quot;checkbox&quot;&gt; 
    &lt;li&gt;&lt;input type=&quot;checkbox&quot; id=&quot;cb1&quot; value=&quot;pepperoni&quot; /&gt;&lt;label for=&quot;cb1&quot;&gt;Pepperoni&lt;/label&gt;&lt;/li&gt; 
    &lt;li&gt;&lt;input type=&quot;checkbox&quot; id=&quot;cb2&quot; value=&quot;sausage&quot; /&gt;&lt;label for=&quot;cb2&quot;&gt;Sausage&lt;/label&gt;&lt;/li&gt; 
    &lt;li&gt;&lt;input type=&quot;checkbox&quot; id=&quot;cb3&quot; value=&quot;mushrooms&quot; /&gt;&lt;label for=&quot;cb3&quot;&gt;Mushrooms&lt;/label&gt;&lt;/li&gt; 
    &lt;li&gt;&lt;input type=&quot;checkbox&quot; id=&quot;cb4&quot; value=&quot;onions&quot; /&gt;&lt;label for=&quot;cb4&quot;&gt;Onions&lt;/label&gt;&lt;/li&gt; 
    &lt;li&gt;&lt;input type=&quot;checkbox&quot; id=&quot;cb5&quot; value=&quot;gpeppers&quot; /&gt;&lt;label for=&quot;cb5&quot;&gt;Green Peppers&lt;/label&gt;&lt;/li&gt; 
    &lt;li&gt;&lt;input type=&quot;checkbox&quot; id=&quot;cb6&quot; value=&quot;xcheese&quot; /&gt;&lt;label for=&quot;cb6&quot;&gt;Extra Cheese&lt;/label&gt;&lt;/li&gt; 
    &lt;li&gt;&lt;input type=&quot;checkbox&quot; id=&quot;cb7&quot; value=&quot;pineapple&quot; /&gt;&lt;label for=&quot;cb7&quot;&gt;Pineapple&lt;/label&gt;&lt;/li&gt; 
  &lt;/ul&gt; 
  &lt;/fieldset&gt; 
  </code></pre>
  <p>and css:</p>
  <pre><code>fieldset.group  { 
    margin: 0; 
    padding: 0; 
    margin-bottom: 1.25em; 
    padding: .125em; 
  } 
  
  fieldset.group legend { 
    margin: 0; 
    padding: 0; 
    font-weight: bold; 
    margin-left: 20px; 
    font-size: 100%; 
    color: black; 
  } 
  
  
  ul.checkbox  { 
    margin: 0; 
    padding: 0; 
    margin-left: 20px; 
    list-style: none; 
  } 
  
  ul.checkbox li input { 
    margin-right: .25em; 
  } 
  
  ul.checkbox li { 
    border: 1px transparent solid; 
  } 
  
  ul.checkbox li label { 
    margin-left: ; 
  } 
  ul.checkbox li:hover, 
  ul.checkbox li.focus  { 
    background-color: lightyellow; 
    border: 1px gray solid; 
    width: 12em; 
  } 
  </code></pre>
  <p>So far it looks like <a href="http://jsfiddle.net/pynhA/" rel="nofollow noreferrer">this</a>. I wanted such that there's only 3 rows in the grouping. So that <code>peperoni, sausage, mushrooms</code> belongs to the first column, and then the next column next to it is <code>gpeppes, xcheese, etc, etc</code>. What should I modify in my css to have this effect instead of laying all the checkboxes in a single column? In other words I want it to take advantage of the empty space to the right of it..</p>