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 is acceptable but the content of the div will float as page will scroll down to the end.

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>
Remember that there isn’t any css code require for this library.

#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.

You can face a problem, if you have used cufon for typography in your web-page. This code will not work, but the solution is very easy. You need to include the js file above the cufon js file.

Define cufon’s js code under the equal height columns js code.
You are done with it and it is the best approach to adjust the height of your design. You can repeat it with every design, you can use your css without any fear for example, margin-top with minus value and such type of advance css techniques.
Twitter Digg Delicious Stumbleupon Technorati Facebook

No comments yet... Be the first to leave a reply!