CSS/Javascript: multiple columns

Question

I'm looking for a columnizer plugin (making columns of my small divs).

It is very important it has the following features:

1) It has to be as light as possible (if it is only css would be great, but I guess it is difficult make it work on IE then...)

2) It has to be cross-browser (I don't need IE6... IE7 and IE8 compatibility is required).

3) The divs has not to be broken. In other terms, the nodes have to be moved to next block but not splitted in 2. The nodes are div elements, they might include other divs, images and text.

4) The column have to have a fixed width and fixed margin. This means that when I resize the browser, and new columns are created (become the window becomes wider), the new columns have to rigidly keep the same width and distance between them. (margin:20px) (width:200px)

5) The content is dynamic. I'm using drupal as CMS. My customer can add or remove nodes, so I need a dynamic solution.

Would be great to have some css.. but I'm afraid I need some jQuery plugin because I need all 4 features being supported.

I found several plugins and css styleshits with very good solutions, but I couldn't find a complete one.

Thanks

Answer 1

I think you want to be using CSS inline-block. That will satisfy your requirements as far as I understand them. Each column will just appear one after the other across the page and wrap onto the next line wherever appropriate.

CSS

.col {
    display: inline-block;
    /* could add `display:-moz-inline-box` for Firefox 2 compatibility */
    vertical-align: top;
    width: 200px;
    margin-right: 20px;
}

HTML

<div class="container">
    <!-- using span instead of div for IE6 compatibility -->
    <span class="col">1st block</span>
    <span class="col">2nd block</span>
    <span class="col">3rd block</span>
    <span class="col">4th block</span>
</div>

If there are major problems in IE6-7 you could try ie7.js which should fix them.