javascript - How to render divs in a 4 column format?

Question

I have a bunch of divs on my page, I need to render it such a way so that they are displayed in 4 columns and all four centered to the parent div.

Can it be done in JS code? Is it possible only to do it css? Which one is recommended?

Here's what i have done so far : Fiddle DEMO

$(document).ready(function () {
    var listItems = $(".item");
    listItems.each(function (index, value) {
        if (index % 4 == 0) {
            // what should i do here? 
        }
    });
});

Answer 1

Just have every 5th element clear your floats.

clear:both

http://jsfiddle.net/m3MK3/

Answer 2

You can use the column-count CSS property.

.container {
    column-count:4;
    -moz-column-count:4; /* Firefox */
    -webkit-column-count:4; /* Safari and Chrome */
}

Answer 3

If you want to this on the run here is a fiddle

$(document).ready(function () {
    var myGrid = $("#myGrid"),
        listItems = $(".item"),
        width = 0;
    listItems.each(function (index, value) {
        if (index === 4) {
            return false;
        } else {
            width += 50;
        }
    });
    myGrid.css('width', width);
    myGrid.css('margin-left', -1 * width / 2);
    myGrid.css('margin-top', -1 * width / 2);

});