Grouping checkboxes css in multiple column layout

You can add to your CSS:

.checkbox {
  column-count: 2;
}

It will split your content into 2 columns.


You can add to your li a property to make it inline elements, an additional set a width to keep two columns:

ul.checkbox li { 
  border: 1px transparent solid; 
  display:inline-block;
  width:12em;
}

The demo http://jsfiddle.net/pynhA/2/


There is an awesome CSS3 Property available called column-count, it can be used to split list elements (ul & ol) into multiple columns here is full detailed tutorial Split Unordered List Into Multiple Columns using CSS3 Property


The column count property in CSS is pretty helpful. If you put a line break after each form element you can make a pretty clean presentation. Also, by adding <span style="white-space: nowrap;">, it keeps the label attached to the check box element

<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
    -webkit-column-count: 6; /* Chrome, Safari, Opera */
    -moz-column-count: 6; /* Firefox */
    column-count: 6;
}
</style>
</head>
<body>

<p>Here are a bunch of check boxes and their labels laid out nicely
<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-count property.</p>

<div class="newspaper">

<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="pizza stuff">something for your pizza</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="pizza stuff">something for your pizza</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="pizza stuff">something for your pizza</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="pizza stuff">something for your pizza</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="pizza stuff">something for your pizza</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="pizza stuff">something for your pizza</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="pizza stuff">something for your pizza</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="pizza stuff">something for your pizza</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="pizza stuff">something for your pizza</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="pizza stuff">something for your pizza</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="pizza stuff">something for your pizza</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="pizza stuff">something for your pizza</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="pizza stuff">something for your pizza</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="pizza stuff">something for your pizza</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="pizza stuff">something for your pizza</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="pizza stuff">something for your pizza</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="pizza stuff">something for your pizza</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="pizza stuff">something for your pizza</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="pizza stuff">something for your pizza</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="pizza stuff">something for your pizza</label></span><br/>
<span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="pizza stuff">something for your pizza</label></span><br/>

</div>

</body>
</html>

Tags:

Html

Css

Recent Posts