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... but 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 number of columns changes dynamically. I.e. When I resize the browser, and the window becomes wider, new columns are created. (and viceversa)

5) The column have to have a fixed width and fixed margin. This means that when I resize the browser, I should always see columns rigidly keep the same width and distance between them. (margin:20px) (width:200px)

6) The content is dynamic. I'm using drupal as CMS. My customer can add or remove nodes, so I need a dynamic solution (I cannot create html content for the columns, it has to be modified by javascript).

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

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


3 answers


I understood very little of that, but this is my best guess


Answered about 8 years ago by Nathan Duran
Doug 1095

A CSS-only solution is to add display:inline-block to the divs. You'll need to add some IE7-specific styles to get it to work; just Google "inline-block IE7".

Answered about 8 years ago by Doug
  • well, I'm afraid is not that simple... the content has to be ordered vertically and not horizontally Patrick about 8 years ago

"I need all 4 features being supported."

Which four and what about the other two? ;-)

You totally lost me at point 3, please clearify.

So column styling can all be done in CSS and the javascript should be relative easy; you know the width of columns, you know the current number of columns in the DOM, you know the current window width, you have DOM utilitities in jQuery to add or remove columns.

Leaves you with a few calculations to decide what to do and when to do it.

Answered about 8 years ago by Roland Franssen
  • Point 3 says that the articles (divs) should be not split in 2 columns... but moved to the next or previous one Patrick about 8 years ago
  • Why should 1 div (containing 1 article) be split in 2 columns, in other words "1 div" is "1 column"? Are we talking about a setup something like; <div id="container"> <div class="column">...</div> <div class="column">...</div> .... etc .... </div> Roland Franssen about 8 years ago