Checkboxes aligned in a row - html

Question

Bear with me as I'm not well versed with front end design. How can I get the following checkboxes aligned and stacked neatly as in the picture?
Right now I have them in a row of 9 checkboxes but they're not aligned and are spaced according to the length of the text.
As seen here:
JSFiddle
HTML:
<div class="tags">
<div class="col">
<label>
<input type="checkbox" rel="accounting" />Accounting</label>
<label>
<input type="checkbox" rel="courier" />Courier</label>
<label>
<input type="checkbox" rel="project-management" />Project Management</label>
<label>
<input type="checkbox" rel="video-games" />Video Games</label>
<label>
<input type="checkbox" rel="dentistry" />Dentistry</label>
<label>
<input type="checkbox" rel="librarian" />Librarian</label>
<label>
<input type="checkbox" rel="programmer" />Programmer</label>
<label>
<input type="checkbox" rel="architect" />Architect</label>
</div>
<div class="col">
<label>
<input type="checkbox" rel="photographer" />Photographer</label>
<label>
<input type="checkbox" rel="it" />IT</label>
<label>
<input type="checkbox" rel="artist" />Artist</label>
<label>
<input type="checkbox" rel="web-developer" />Web Developer</label>
<label>
<input type="checkbox" rel="web-designer" />Web Designer</label>
<label>
<input type="checkbox" rel="neurologist" />Neurologist</label>
<label>
<input type="checkbox" rel="veterinarian" />Veterinarian</label>
<label>
<input type="checkbox" rel="teacher" />Teacher</label>
</div>
<div class="col">
<label>
<input type="checkbox" rel="character-animator" />Character Animator</label>
<label>
<input type="checkbox" rel="salesman" />Salesman</label>
<label>
<input type="checkbox" rel="telemarketing" />Telemarketeing</label>
<label>
<input type="checkbox" rel="construction" />Construction</label>
<label>
<input type="checkbox" rel="lawyer" />Lawyer</label>
<label>
<input type="checkbox" rel="actor" />Actor</label>
<label>
<input type="checkbox" rel="policeman" />Policeman</label>
<label>
<input type="checkbox" rel="forestry" />Forestry</label>
</div>
</div>
<!-- end tags -->
CSS:
.filter {
width: 850px;
padding: 25px;
border: 1px solid black;
margin: 25px;
float: left;
}
.col {
width: 100%;
display: block;
margin-right: 10px;
}
label{
vertical-align: top;
float: left;
width: 160px;
}
Edit

Answer 1

I'd use a table layout. Simply add the following CSS:
.tags {
display: table;
}
.col {
display: table-row;
}
.col label {
display: table-cell;
}
Updated fiddle: http://jsfiddle.net/5sz6qdos/13/
Others might use flexbox but I have never used it myself, so not sure how to implement that.
I would probably go a different route, however, to make it more semantic and setup to be more flexible:
<ul class="tags">
<li class="tag"><label>...
....<!--put ALL of your label elements in a single parent element-->
</ul>
and
.tag {
display: block;
float: left;
width: 25%; /*for if you want 4 columns, or*/
width: 120px; /*if you want specific widths*/
}
.tags:after { content: ""; display: table; clear: both; } /*clearfix*/
Using percentages will flex all the columns, or using fixed pixels will allow the elements to flow (my preference).

Answer 2

first of all change your html code like that:
<input type="checkbox" name="accounting" id="accounting" rel="accounting" />
<label for="accounting">Accounting</label>
Do this for every checkbox.
Then Do the follwoing css
.tags{clear:both}
.col{float:left;width:120px;/*adjust your width */}
.col lable, .col input{display:inline-block;}
.col label{width:120px;/*adjust your width */}
.col input{width:20px;/*adjust your width */}

Answer 3

For starters, you're using the label tag wrong. They should not have an input inside them. And how I would do what you're trying to do is something like this:
<div class="col">
<label>Job</label>
<input>
<label>Job</label>
<input>
</div>
<div class="col">
<label>Job</label>
<input>
<label>Job</label>
<input>
</div>
Then in your CSS...
.col {
display: inline-block;
width: 33.3%;
vertical-align: top;}
label {
display: inline-block;
width: 100px;}
input {
display: inline-block;
width: calc(100% - 100px);}
To make sure the columns, labels, and inputs all touch nicely, you have to remove the whitespace. You can either remove it from the code itself, connect elements with comment tags, or set the font-size to 0 on the container. And it wouldn't hurt to throw this in your CSS:
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;}

Answer 4

So you're kinda having the same problem I mentioned belwo... the text can't be what you're basing off of. You have to set an actual width.
http://jsfiddle.net/tueez7bx/6/
This works, but extends past your limits. You should really consider my other options I provide below.
Also, you can't use ids the way you are. That is incorrect. You'll need to change all the #col to .col.
Second Edit
So based on a comment provided below I have come to realize the goal of what you're trying. Sadly because of the flexibility of text and items you would need to have defined widths for each to line up perfectly. If you don't know what the longest string will be then you will have a problem with risking that string breaking below the words or running into the next checkbox.
You can see that here: http://jsfiddle.net/5sz6qdos/22/
However.. if you extend the width of your container and just have a greater width you will be able to avoid this...
You can see what I am imagining you're asking here: http://jsfiddle.net/5sz6qdos/28/
Before Edit
You're doing well overall...
http://jsfiddle.net/5sz6qdos/3/
.col {
width: 160px;
float: left;
margin-right: 10px;
}
label{
display: block;
}
This does define a width and doesn't allow for full flexibility. It does however give you the option of going to responsive layouts with this data.
To get the boxes the way you want them you cannot use pure CSS. You will need a mix of Javascript. Checkboxes themselves can not be edited with CSS directly. You will need to hide the checkbox with display: none and add an image for the boxes themselves. Once you have done this you will need to use jQuery to check and uncheck each box. That is the only way to get the exact look.
SO has a lot of answers out there for the jQuery part.

Answer 5

Thanks to all for the knowledge and push in the right direction.
Here is the working solution I found while setting line widths.
JSFiddle
HTML
<div class="filter">
<h3 style="text-align: center;">Blog Profession Filters</h3>
<ul class="checkbox">
<li>
<input type="checkbox" id="cb1" rel="accounting" value="accounting" />
<label for="cb1">Accounting</label>
</li>
<li>
<input type="checkbox" id="cb2" rel="project-management" value="project-management" />
<label for="cb2">Project Management</label>
</li>
<li>
<input type="checkbox" id="cb3" rel="information technology" value="information-technology" />
<label for="cb3">Information Technology</label>
</li>
<li>
<input type="checkbox" id="cb4" rel="courier" value="courier" />
<label for="cb4">Courier</label>
</li>
<li>
<input type="checkbox" id="cb5" rel="video-games" value="video-games" />
<label for="cb5">Video Games</label>
</li>
<li>
<input type="checkbox" id="cb6" rel="web-development" value="web-development" />
<label for="cb6>">Web Development</label>
</li>
<li>
<input type="checkbox" id="cb7" rel="veterinarian" value="veterinarian" />
<label for="cb6>">Veterinarian</label>
</li>
<li>
<input type="checkbox" id="cb8" rel="web-designer" value="web-designer" />
<label for="cb6>">Web Designer</label>
</li>
<li>
<input type="checkbox" id="cb9" rel="attorney" value="attorney" />
<label for="cb9>">Attorney</label>
</li>
<li>
<input type="checkbox" id="cb10" rel="medical-practitioner" value="medical-practitioner" />
<label for="cb10>">Medical Practitioner</label>
</li>
<li>
<input type="checkbox" id="cb11" rel="telemarketing" value="telemarketing" />
<label for="cb11>">Telemarketing</label>
</li>
<li>
<input type="checkbox" id="cb12" rel="construction" value="construction" />
<label for="cb12>">Construction</label>
</li>
</ul>
</div>
<div id="results">
<ul class="results">
<li class="accounting" style="list-style-type:none"> Accounting
</li>
<li class="project-management" style="list-style-type:none"> Game QA Project Management
</li>
<li class="information-technology" style="list-style-type:none"> Information Technology
</li>
<li class="courier" style="list-style-type:none"> Courier / Parcel Delivery
</li>
<li class="video-games" style="list-style-type:none"> Video Games
</li>
<li class="web-development" style="list-style-type:none"> Web Development
</li>
<li class="veterinarian" style="list-style-type:none"> Veterinarian
</li>
<li class="web-designer" style="list-style-type:none"> Wed Designer
</li>
<li class="attorney" style="list-style-type:none"> Attorney
</li>
<li class="medical-practitioner" style="list-style-type:none"> Medical Practitioner
</li>
<li class="telemarketing" style="list-style-type:none"> Telemarketing
</li>
<li class="construction" style="list-style-type:none"> Construction
</li>
</ul>
</div>
CSS
.filter {
width: 850px;
padding: 25px;
border: 1px solid black;
margin: 25px;
}
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;
display:inline-block;
width:12em;
}
ul.checkbox li label {
margin-left:;
}
ul.checkbox li:hover, ul.checkbox li.focus {
background-color: lightyellow;
border: 1px gray solid;
width: 12em;
}
.results {
width: 850px;
padding: 25px;
border: 1px solid black;
margin: 25px;
}