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>