Back when tables were used for layouts, creating equal height columns was very simple. All you had to do was create three cells in a row and you have a layout with equal height columns. The method for creating equal height columns isn’t as straightforward when you use CSS for layouts.

This article discusses some methods to create equal height columns that work on all major web browsers (including the infamous IE6). All of these methods show how to create a three column layout.

Create a layout in which all the three columns assume the height of the tallest column.

Method 1: Using display: table Attribute

In this method we use a list or one div enclosing a set of <div>s (one for each column). The enclosing div is given a display: table attribute and each enclosed div is given a display: table-cell attribute.

I’ll discuss this with an example:

Here’s the markup for this technique

<div class=”base”>
 <ul class=”base-row”>
 <li><div >.....Lots of  Content....</div></li>
 <li><div>.....Lots of  content....</div></li>
 <li><div>.....Lots of  content....</div></li>
 </ul>
 </div>

Here’s the CSS

.base {
 /*make it 100% width and a minimum of 1000px width*/
 width: auto;
 margin-left: 0px;
 margin-right: 0px;
 min-width: 1000px;
 padding: 0px;
display:table;
 }
.base-row {
 Display: table-row;
 }
.base li {
 display: table-cell;
 width: 33%;
 }
.cell1 {
 background-color: #f00;
 }
.cell2 {
 background-color: #0f0;
 }
.cell3 {
 background-color: #00f;
 }

Advantage:

It is very simple and easy to implement. It is far simpler than most other methods. This can save you a LOT of headache and time.

A margin (the equivalent of a cellspacing in table layouts) cannot be applied to each cell. This can be overcome by using a border of white color (or your background color) of a suitable width to mimic a cell spacing.

Disadvantage:

This method doesn’t work on IE7 and below. It may be a long time (when IE7 becomes the new IE6 or IE5) before we can safely use this technique. But it is useful when you can be certain IE7 will not be used by your audience such as in corporate Intranets.

Check more methods on: http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/

Related Resources:

• Web Form Enhancement with jQuery Plugins and Tools
• Rss to Email Te Free and Easy Way
• Setting Focus to an ASP.NET Control – Set Focus After PostBack – After Submit – on Page Load in ASP.NET 1.x
• Best of CSS Design Inspiration
• How To Design An Effective Web Form