This method relies on JavaScript to set the height attribute of all the columns in the layout to the height of the tallest column. In this example, I have used jQuery to equalize the columns.

Equal Height Columns

This method relies on JavaScript to set the height attribute of all the columns in the layout to the height of the tallest column. In this example, I have used jQuery to equalize the columns.
You can put the JavaScript in a separate file and attach it to your HTML or use it inline but make sure you also attach jquery to the HTML page and this script is called after jquery is attached.
The code you need to change is the css class of the div elements that make the columns. In this example it is:

  .container > div

You may replace the above with the css class that describes all the <div> elements of the columns. For example: you may add a class to each of the three columns and use that instead for simplicity.

full-height columns.html

<!-- Create the HTML for the three columns -->
<div class=”main”>
<div  class=”main-content”> … Main Content … </div>
<div  class=”content”> … Sub Content … </div>
<div  class=”sidebar”> Sidebar Content </div>
</div>

script.js

/*
 *  NARGA JavaScripts Functions
 *	Copyright (C) 2003 - 2013 Dinh Quan Nguyen a.k.a Narga <dinhquan (at) narga (dot) net>
 *	Website:	http://www.narga.net
 *			http://www.narga.org
 *
 *	You are allowed to use this software in any way you want providing:
 *		1. You must retain this copyright notice at all time
 *		2. You must not claim that you or any other third party is the author of this software in any way.
 *		3. Feedback to me ([email protected]) when you use my scripts, I will add you to customer list!
 *		4. The CSS, XHTML, JS and design is released under GPL: http://www.opensource.org/licenses/gpl-license.php
 */

function setEqualHeight(columns)
 {
 var tallestcolumn = 0;
 columns.each(
 function()
 {
 currentHeight = $(this).height();
 if(currentHeight > tallestcolumn)
 {
 tallestcolumn  = currentHeight;
 }
 }
 );
 columns.height(tallestcolumn);
 }
$(document).ready(function() {
 setEqualHeight($(".main  > div"));
});

style.css

/* Put them next to each other and aligns them in center them. */

.main {
 Width: 900px;
 Margin-left: auto;
 Margin-right: auto;
}

.main-content {
 Float: left;
 Width: 33%;
}

.content {
 Float: left;
 Width: 33%;
}

.sidebar {
 Float: left;
 Width: 33%;
}