Easy steps to develop 3 column layout with equal height using CSS

In this I am not going into the details, this is just for the basic solution to the height problem of 3 column layout.

The basic structure goes like this.

<div id=”container”>
 <div id=”left_nav”> </div>
 <div id=”main_content”> </div>
 <div id=”right_nav”> </div>
</div>

Step 1: Find the column whose height will be maximum.

Suppose “main_content” is going to the longest column.

Step 2: Set background color to first column

Set the color which you want to be the color of “left_nav” as background color of “container” div.

#container {
    background-color: #FFFF99;
    margin: 0px;
    padding: 0px;
    width: 100%;
    float: left;
}

Step 3: Set background to third column

Add a extra div as background for the other two divs – “main_content” and “right_nav”.

<div id=”container”>
 <div id=”left_nav”> </div>
 <div id=”extra_div”>
  <div id=”main_content”> </div>
  <div id=”right_nav”> </div>
 </div>
</div>

Make the width of this “extra_div” equal to the sum of width of two divs – “main_content” and “right_nav”.

Height (extra_div) = Height(main_content) + Height(right_nav)
Make the “extra_div” float right or opposite the other two divs.

Make the background color of “extra_div” same as you want for “right_nav”.

#extra_div:background-color = #right_nav:background-color

Add background color to “main_content”.

#extra_div {
    background-color: #FFFF99;
    margin: 0px;
    padding: 0px;
    width: 75%;
    float: right;
}

This gives us three column layout.



There are many articles on this issue. I liked these two:

• Raise text relevance by rearranging a three-column layout


• Equal Height Columns with Cross-Browser CSS & No Hacks