CSS/Javascript: dynamic multiple columns

Question

I need to build a dynamic multiple columns view for the content of my website (I'm using drupal as CMS, if can be useful info), with the following features

1) the columns width is fixed (OK)

2) the columns number depends on the window width (OK)

3) the elements has not fixed height (important, not fixed yet)

4) the content should be possibly vertically distributed (no idea how to do this, since I use css attribute float:left)

See this screenshot to better understand: http://dl.dropbox.com/u/72686/grid.png

thanks

If by box you mean a single element of my list, well its height is defined by the content (number of text lines).. so I cannot set it in advance... — aneuryzm
– aneuryzm, Commented Feb 21, 2010 at 17:31

Harmen · Accepted Answer · 2010-02-21 16:55:48Z

2

Take a look at jQuery Masonry, a great plugin.

answered Feb 21, 2010 at 16:55

Harmen

22.5k4 gold badges57 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

aneuryzm Over a year ago

hi, Masonry seems pretty cool... but does it add new columns (redistributing the content) if the window width increases ? (or it just resizes the width of the columns ?)

aneuryzm Over a year ago

I'm afraid that I need to assign the correct column to each element with the class attribute in html... right ? I would like to avoid that.. because the content changes, when my customer adds new items

Warty · Accepted Answer · 2010-02-21 16:56:24Z

1

Well, i'll try to chip in some.
the following website: http://www.quirksmode.org/dom/w3c_cssom.html used to host the following code [although they've taken it down I guess =/ but it functions well, and i've been using it in almost all of my projects]

function getClientWidth()
{ 
    if( typeof( window.innerWidth ) == 'number' ) {
        return window.innerWidth;
    } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
        return document.documentElement.clientWidth;
    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
        return myWidth = document.body.clientWidth;
    }
}
function getClientHeight()
{  
    if( typeof( window.innerWidth ) == 'number' ) {
        return window.innerHeight;
    } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
        return document.documentElement.clientHeight;
    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
        return document.body.clientHeight;
    }
}

Note that getting the internal width of the browser [the window's size excluding the chrome] is different for many browsrs, as you can see in the code.

You must follow this by doing an if/switch to format your page depending on what you want to do [css styling's positoin = absolute, left, top,] clamp the width/height or you'll get the result of acid3 when it runs on IE =) [anyone get that joke? heh?]

Note that if you use my method, IE dislikes you and er... divs[your columns] tend to overlap. Sadly, the safest way to do anything in your situation is by using a table. However, most "modern" web developers tend to dislike table for laying out your website [in fact, some consider it to be deprecated]

answered Feb 21, 2010 at 16:56

Warty

7,4141 gold badge34 silver badges53 bronze badges

3 Comments

aneuryzm Over a year ago

hi, thanks for reply - I need a cross-browser solution of course, I cannot ignore IE - your answer is entirely focused on detecting window width right ? What about the other points ? I'm using jquery to detect the window width, that's easy to do.

Warty Over a year ago

The differences should be minor. I was doing something like this last year. when I set the width of an object to ... say, 100px, IE would render it at 110 px [or occasionally, it wouldn't respect the width css tag at all]... Once again, IE is pretty good with tables [actually it screws a ton of stuff up] so... idk. I'm gonna eat breakfast now and i'll brainstorm while doing so, heh

Warty Over a year ago

Ok, do you have images in your divs?

aneuryzm · Accepted Answer · 2010-02-21 23:11:47Z

0

I've solved with this wonderful jquery plugin: http://welcome.totheinter.net/columnizer-jquery-plugin/

answered Feb 21, 2010 at 23:11

aneuryzm

65k101 gold badges283 silver badges502 bronze badges

Collectives™ on Stack Overflow

CSS/Javascript: dynamic multiple columns

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related