CSS/Javascript: multiple columns

Question

hi,

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

How about 1KB Grid CSS Framework? It's the simplest CSS framework and it is highly customizable.

A sample stylesheet looks like this:

/* 1KB grid - 12 columns, 60 pixels each, with 20 pixel gutter */
.g1{width:60px;}.g2{width:140px;}.g3{width:220px;}.g4{width:300px;}.g5{width:380px;}.g6{width:460px;}.g7{width:540px;}.g8{width:620px;}.g9{width:700px;}.g10{width:780px;}.g11{width:860px;}.g12{width:940px;}
.column{overflow:hidden;float:left;display:inline;margin:0 10px;}
.row{width:960px;overflow:hidden;margin:0 auto;}.row .row{width:auto;display:inline-block;margin:0 -10px;}

And the HTML looks like:

<div class="row">
    <div class="column g4">...</div>
    <div class="column g4">...</div>
    <div class="column g4">...</div>
</div>

Answer 2

I have read your list of requirements (but, I must admit, I may not have completely understood them), but, based on what I have understood, I would suggest a jQuery plugin called "Easy List Splitter".

jQuery plugin: Easy List Splitter | Andrea Cima Serniotti

Not sure how many of your requirements this may satisfy, but, at the least, it may provide a suitable base from which to hack a customised solution.

Answer 3

Have you tried this before: http://welcome.totheinter.net/columnizer-jquery-plugin/

I've used it before and found it very easy to set-up - but obviously YMMV :)

Answer 4

It sounds like you're looking for a grid view for the nodes. Take a look at this Table-Free Gallery View in Drupal tutorial. Basically, the key idea is to use inline-block divs to create the columns that you need.

If you don't want vertical spaces in between the spaces (to make it look like columns), do not set margin-bottom as shown in the example, or set it to margin-bottom: 0. You can also create the column lines by adding left and right borders with CSS: border-left: 1px solid black; border-right: 1px solid black;

Also, you should be using Views in Drupal for this. Although it isn't necessary, it gives you more control over the display.

Answer 5

In other words, the columns should be dynamic. If the browser window is small, I have few columns, if it is big I have many columns – Patrick May 9 at 17:28

im not sure you can accomplish this with just css, as you are adding removing elements and flowing content. i think you will have to resort to JS

Answer 6

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.

Answer 7

Hi, have you had a look at the jquery-masonry plugin. Automatically creates columns, with fixed width & consistent margin.

Here's a demo

Answer 8

Just float them all left. Works in all browsers from IE6 and on.

Here's an SSCCE.

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2795266</title>
        <style>
            .nodes div {
                float: left;
                width: 200px;
                margin: 10px; /* Or set right and bottom to 20px. */
                border: 1px solid black; /* Just for visibility. */
            }
        </style>
    </head>
    <body>
        <div class="nodes">
            <div>node</div>
            <div>node</div>
            <div>node</div>
            <div>node</div>
            <div>node</div>
            <div>node</div>
        </div>
    </body>
</html>

Answer 9

There are a pile of jQuery plugins which specifically deal with spreading content across a number of columns:

In addition to jQuery plugin: Easy List Splitter | Andrea Cima Serniotti, which I already mentioned in an earlier Answer, there are the following:

• Columnizer
• Newspaper Column Layout
• Columnize

One of them should do the trick.

Answer 10

Then you want the jquery masonry plugin.

Go to my test site - http://jasondaydesign.com/masonry_demo

You will see I have 2 different box sizes (width) that lay around each other. You can do this with one column size instead, just for the purposes of my sandbox I was playing with two.

When you resize the browser, the boxes will rearrange themselves accordingly.

It's a brilliant script.

Good Luck!