Working with Columns

December 23
blog author

Appno Blogger

Appnovation Coop

While we all wait for multi-column layouts with CSS3 to become standard across all browsers, we have to put our faith in js to help us solve our column problems. Here are two things I like to use.

Columnizer

Columnizer is great for when you have a lot of content that you want to make columns out of. It lets you set the width, height, number of columns, define which areas of content you DON'T want to split, and then will set up divs that allow it to flow properly. You can resize the page or add new content and the columns will stay fluid and reposition themselves properly - you don't have to worry about setting up your css all over again. It is available here: http://welcome.totheinter.net/columnizer-jquery-plugin/

Equal Height Columns

Another problem I sometimes face is making sure that pre-defined columns (view teasers, for example) can often be of varying heights, depending on the content that is inside them. If the columns have some kind of background or other styling on them, this can look visually unappealing. I use this little snippet of code, which I found at http://abcoder.com/css/css-equal-height-columns/, to help me keep them all the same height:

$(function(){ var H = 0;$(".equalheight").each(function(i){ var h = $(".equalheight").eq(i).height(); if(h > H) H = h; }); $(".equalheight").height(H); }); 

Voila! Two frustrating column-related problems solved, just in time for the holidays!