CSS Cross-Browser (IE7+) Checkbox Alignment

Aligning checkboxes with their labels in a cross-browser way is surprisingly difficult. Hardcode the checkbox's height and width, remove its padding, and make its height plus vertical margins equal to the label's line-height. If the label text is inline, float the checkbox. Firefox, Chrome, and IE7+ all render the following layout identically. In these four examples, the HTML code is identical except for the classes on .example-container, which alternate between .one-per-line or .many-per-line and .unindented or .indented.

<span class="example-container one-per-line indented"> <label><input type="checkbox"><span class="label-text">First Item</span></label> <label><input type="checkbox"><span class="label-text">Second</span></label> <label><input type="checkbox"><span class="label-text">Long <b>one-per-line indented</b> item which breaks into multiple lines.</span></label> <label><input type="checkbox"><span class="label-text">Penultimate</span></label> <label><input type="checkbox"><span class="label-text">Last Item</span></label> </span> <style type="text/css"> /* This is the important part. */ .example-container label {line-height:25px;} .example-container input[type=checkbox] {height:13px; width:13px; padding:0; margin-top:6px; margin-bottom:6px;} .unindented input[type=checkbox] {float:left;} /* The rest depends on which layout you prefer. */ .one-per-line label {display:block;} .many-per-line label {display:inline-block;} .indented span.label-text {display:inline-block;} .unindented span.label-text {display:inline;} /* The less important or more obvious stuff. */ .example-container {max-width:463px;} .example-container input[type=checkbox] {margin-left:0; margin-right:6px;} .many-per-line label {margin-right:10px; vertical-align:top;} .indented span.label-text {max-width:250px;} .indented input[type=checkbox] {vertical-align:top;} </style>