How to Make Columns of Equal Height in your Blogger Blog

When designing the blog with two or more columns, one of the CSS issues that arise is that is almost impossible to make the columns of equal heights.For example, we cannot fix or predetermine the length of the posts, hence when designing a two or three column layout, we can't assign the sidebar(s) a height equal to the main post column.If we try to do so, we have to make the sidebar(s) equal to the length of your longest post,therefore your shorter posts will have a large space below them which is not advised.

This is particularly noticeable when the colors used for columns and the page's background color are different and the background color (or image) is used for the sidebar which does not stretch to the length of the page.

This problem also comes into play for those who want to display their blog posts side-by-side on the home page or for those who have a collection of images and want to display their thumbnails side-by-side even when posting them in different blog posts for example to build a cool wallpaper blog like a professional wallpaper site.

In this tutorial, I'll explain how to use JavaScript to ensure columns of your choosing (whether the sidebars and main column, or individual posts) appear at equal heights to ensure a pleasant and harmonious layout for your blog design.

So, What it is and How it works

In this tutorial, we will be using an adaptation of the "Matching Columns" JavaScript by Alejandro Gervasio. which was modified to work in FireFox by Stefan Mischook for Killersites.com. You can read the original article and even view a video explaining how this script works over at the Killersites blog.

Working of this javascript can be explained as the JavaScript matches the height of all columns which use a specific CSS "class". It finds the length of the longest columns which uses this class name, then creates extra CSS declarations to ensure all other columns using this class are lengthened to the same height.

If we assign the class of "column" for both the main posts section and sidebars in our blog template, the script will ensure that the main column and both sidebars appear of equal length when viewed in a web browser.

The original Matching Columns JavaScripts use external files which are linked to in the head section of the web-page. However, I have adapted this method for use in Blogger templates so we can use "inline" JavaScript, meaning we do not need to host a JavaScript file on an external host.

Interesting? Now, How to add the Matching Columns function to your Blogger layout.

The first step for creating columns of matching height in your Blogger layout is to add the required JavaScript code to the head section of your template.

It's quite easy though, all you have to do is to copy the code in the code-box below and place it just before the </head> tag. You can search for </head> tag using search function of your web browser by pressing Ctrl+F.

<script type='text/javascript'> /* Enables columns to be of the same height for better blog designs. Derived from a script by Alejandro Gervasio. Modified to work in FireFox by Stefan Mischook for Killersites.com Adapted for inline use with Blogger blogs by Sharad Saxena of BloggerBang.blogspot.com How it works: just apply the CSS class of 'column' to your pages's main columns whom you want to be of equal height. */ function matchColumns(classname){ var divs,contDivs,maxHeight,divHeight,d; // get all <div> elements in the document divs=document.getElementsByTagName('div'); contDivs=[]; // initialize maximum height value maxHeight=0; // iterate over all <div> elements in the document for(var i=0;i<divs.length;i++){ // make collection with <div> elements with class attribute 'container' if(new RegExp("\\b" + classname + "\\b").test(divs[i].className)){ d=divs[i]; contDivs[contDivs.length]=d; // determine height for <div> element if(d.offsetHeight){ divHeight=d.offsetHeight; } else if(d.style.pixelHeight){ divHeight=d.style.pixelHeight; } // calculate maximum height maxHeight=Math.max(maxHeight,divHeight); } } // assign maximum height value to all of container <div> elements for(var i=0;i<contDivs.length;i++){ contDivs[i].style.height=maxHeight + "px"; } } // Runs the script when page loads window.onload=function(){ if(document.getElementsByTagName){ matchColumns('crosscol'); // class=column matchColumns('column'); // class=maincolumn } } </script> <-- Equal Columns JavaScript End -->

The javascript is pretty long so be careful to copy the entire script and place it carefully just before the </head> tag.