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)
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.
I understood very little of that, but this is my best guess
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".
"I need all 4 features being supported."
Which four and what about the other two? ;-)
You totally lost me at point 3, please clearify.
Leaves you with a few calculations to decide what to do and when to do it.