Easy Approach – Equal height columns.

In today’s tutorial, I am going to teach you the easiest way of equal height columns implementation.

In general design practice, it is very common that we get design which require 100% height of columns.

The common example is a design with left navigation with some links and content area on the right side of the page.

Most of the websites are dynamic today and user can add more and more text on the page which increase the height of the content area and we usually have to make some balance of height b/w content area and sidebars.

In my opinion, CSS is completely fail in this aspect. It is usual that designers and programmers face difficulties to implement equal columns through css. Most of the times, we cannot user same technique on every design to achieve equal height columns.

There is a css solution that we can use but you need to fix the position of the html element (DIV).

Example of css code.

#div1{
        position:fixed;
        background-color: #CCC;
        height: 100%;
}

This solution will be much difficult in the case of nested divs.

In a situation where a user doesn’t want to move the content with page scroll, we have to adopt some other method to achieve equal heights of columns.

After checking all the possible things and doing experiments with it. I ended up with a jquery equal height plugin.

Download Equalheightcolumns Plugin

I will proceed with the code and implementation but I would like to discuss its advantages before proceeding further ahead.

• Adjust the height by defining IDS of element.
• Automatically, adjust the height of more than one element by auto-selection of the element with more height value.
• Cross-browser compatible.

Let’s proceed with the implementation.

<script type="text/javascript" src="http://localhost/test/js/equalheightcolumn.js"></script>

Include “Equalheightcolumn” css in the header section.

JS code by defining two divs.

<script type="text/javascript" language="javascript">
	
// requires jquery.onfontresize.js
$(document).ready(function() {
	$('#div_left, #div_right').equalHeightColumns();
});
</script>

#div_left is the name of 1st div.
#div_right is the name of 2nd div.

In the above js code, we are separating it with comma. You can add more divs if you require for your design to equalize.

Calling equalHeightColumns() function for the objects.

$('#div_left, #div_right').equalHeightColumns();

After the implementation of the above code, I didn’t face any problem with the output and also it is cross-browser compatible.