Why are the CSS class rules respected in one case but not the other?

See more:

CSS

HTML

jQuery

checkbox

plugin

, +

In this jsfiddle (http://jsfiddle.net/clayshannon/nVQ9E/1/) I have two accordion folds that are assigned different data, but have the same class, which should align the checkboxes they are populated with in four columns. In the case of the second accordion fold (Sites), it does do that; in the case of the other, though (Depts), it only uses three columns?

Why would that be? In other fiddles (such as http://jsfiddle.net/jakecigar/ktPWK/7/) using the various column classes works perfectly.

HTML

<h1>Receipt Report Criteria</h1>
<form>
    <fieldset>
        <legend>Date Range</legend>
        <label for="BeginDate" class="staticLabel">Begin Date</label>
        <input id="BeginDate" />
        <label for="BeginTime" class="staticLabel">Begin Time</label>
        <input id="BeginTime" />
        <br/>
        <label for="EndDate" class="staticLabel">End Date</label>
        <input id="EndDate" />
        <label for="EndTime" class="staticLabel">End Time</label>
        <input id="EndTime" />
    </fieldset>
        <br/>
        <label for="UPC" class="staticLabel">UPC Starts with</label>
        <input id="UPC" />
        <br/>
        <br/>
        <div id="accordion">
            <h3 id="deptHeader">Departments</h3>
            <div id="depts" class="checkboxGroups4Col">
            </div>
            <h3 id="sitesHeader">Sites</h3>
            <div id="sites" class="checkboxGroups4Col">
           </div>
        </div>
        <br/>
        <input type="submit" value="View Report" class="submitButton"></button>
</form>

CSS

h1 {
    color: chocolate;
    font-family:'Segoe UI Light';
}
body {
    background-color: oldlace;
}
form {
    background-color: whitesmoke;
}
legend {
    font-family:'Century Gothic', Verdana, Georgia, sans-serif;
    font-size: 1.2em;
    color: navy;
}
.staticLabel {
    display: inline-block;
    width: 140px;
    margin-right: 2px;
    text-align: right;
    font-family: Consolas, Candara, sans-serif;
}
.checkboxGroups1Col { width: 200px; margin-bottom: 10px; border: 1px solid chocolate; }
.checkboxGroups2Col { width: 400px; margin-bottom: 10px; border: 1px solid chocolate; }
.checkboxGroups3Col { width: 600px; margin-bottom: 10px; border: 1px solid chocolate; }
.checkboxGroups4Col { width: 800px; margin-bottom: 10px; border: 1px solid chocolate; }
.checkboxGroups5Col { width: 1000px; margin-bottom: 10px; border: 1px solid chocolate; }
label { display: inline-block; width: 200px; }

#depts, #sites {
    min-height: 200px;
}
.submitButton {
    background-color: Navy;
    color: white;
    font-size: 1.2em;
    margin-top: 15px;
}

jQuery
Plugin code

(function ($) {
    $.fn.extend({
        appendAllCheck: function () {
            var selectors = $('<div class="selectors"></div>').appendTo(this)
                .append('<button>Select all</button><button>Deselect all</button>');
            selectors.find('button').click(function () {
                var checked = $(this).text() == 'Select all';
                $(this).closest('.selectors').parent()
                    .find('[name]:checkbox').prop('checked', checked);
                $(this).prop('checked', false);
                return false;
            });
            return this;
        },
        appendCheckboxes: function (name, labels) {
            var container = this;
            $.each(labels, function (i, l) {
                var label = $.isPlainObject(labels) ? i : l,
                    value = $.isPlainObject(labels) ? l : i;
                $('<label>').append(
                $('<input>', {
                    'type': 'checkbox',
                        'name': name
                }).val(value),
                label).appendTo(container);
            });
            return this;
        },
        checkedBoxes: function () {
            return this.find(':checked').map(function () {
                return $(this).parent().text();
            }).get();
        }
    });
})(jQuery);

"Regular old" jQuery code

var deptsArray = [];
for (var i = 2; i < 100; i++) {
    deptsArray.push(i);
}

var sitesArray = [];
for (var i = 1; i < 7; i++) {
    sitesArray.push(i);
}

$('#BeginDate, #EndDate').datepicker();
$('#accordion').accordion();
$('button').button();
$('#depts').appendAllCheck().appendCheckboxes('deptsCheckboxList', deptsArray);
$('#sites').appendAllCheck().appendCheckboxes('sitesCheckboxList', sitesArray);