Four Methods to Create Equal Height Columns
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 class="cell1"><div class="content1" >.....Lots of Content....</div></li> <li class="cell1"><div class="content2">.....Lots of content....</div></li> <li class="cell1"><div class="content3">.....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.
Method 2: Using JavaScript
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.
Create the HTML for the three columns:
<div class=”container”> <div class=”leftsidebar”> … Lots Of Content … </div> <div class=”content”> …. Lots Of Content … </div> <div class=”rightsidebar”> … Lots Of Content … </div> </div>
Put them next to each other and aligns them in center them.
.container {
Width: 900px;
Margin-left: auto;
Margin-right: auto;
}
.leftsidebar {
Float: left;
Width: 33%;
}
. content {
Float: left;
Width: 33%;
}
. content {
Float: left;
Width: 33%;
}
JavaScript (using jQuery):
function setEqualHeight(columns)
{
var tallestcolumn = 0;
columns.each(
function()
{
currentHeight = $(this).height();
if(currentHeight > tallestcolumn)
{
tallestcolumn = currentHeight;
}
}
);
columns.height(tallestcolumn);
}
$(document).ready(function() {
setEqualHeight($(".container > div"));
});
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.
Advantage:
Advantage of this method is that there is no CSS involved in making the columns get equal heights. It also works in every major browser
Disadvantage:
If JavaScript is disabled, the columns will not be of equal height. This shouldn’t bother you because many essential websites today need JavaScript function therefore very few users will have JavaScript disabled. Even if it is disabled, the site will not become unusable.
Method 3: Faux Columns
This method is the earliest known solution to the equal columns problem. This method involves the use of a background image that has one region for each column’s background color. The columns are positioned just above the background color regions that belong to them. After the markup of all three columns is a <div> element which takes a clear: both attribute making the container background stretch to the tallest columnThe background is repeated vertically so it appears like the three columns are of equal height.
The HTML:
<div class=”container”> <div class=”left”></div> <div class=”content”></div> <div class=”right”></div> <div class=”clearer”></div> </div>
The CSS:
.container {
background-image: tile.png;
background-repeat: repeat-y;
width: 900px;
margin-left: auto;
margin-right: auto;
}
.leftsidebar {
float: left;
width: 200px;
}
.content {
float: left;
width: 400px;
}
.right {
float:left;
width: 300px;
}
.clearer {
clear: both;
}
Advantage:
It is simple, doesn’t need much CSS and can be easily implemented.
Disadvantage:
You cannot use fluid width equal height columns if you have more than two columns as we are using an image.
Method 4: Using Separate Background Color <div> elements
In this method we use a separate <div> element for the background of each column. Any div element takes the height of the largest element it encloses. This method works based on that principle.
The HTML:
<div class=”rightback”> <div class=”contentback”> <div class=”leftback”> <div class=”leftsidebar”>…Lots Of Content…</div> <div class=”content”> …Lots Of Content…</div> <div class=”rightsidebar”> …Lots Of Content…</div> </div> </div> </div>
The CSS:
.rightback {
width: 100%;
float:left;
background-color: green;
overflow:hidden;
position:relative;
}
.contentback {
float:left;
background-color:blue;
width: 100%;
position:relative;
right: 300px; /* width of right sidebar */
}
.leftback {
width: 100%;
position:relative;
right: 400px; /* width of the content area */
float:left;
background-color: #f00;
}
.container {
width: 900px;
margin-left: auto;
margin-right:auto;
}
.leftsidebar {
float:left;
width: 200px;
overflow:hidden;
position:relative;
left: 700px;
}
.content {
float:left;
width: 400px;
overflow:hidden;
position:relative;
left: 700px;
}
.rightsidebar {
float:left;
overflow:hidden;
width: 300px;
background-color:#333;
position:relative;
left: 700px;
}
Looks complicated doesn’t it? Once you understand how it works it becomes very simple. The technique is summed up in the following 5 points:
- .rightback, .contentback, and .leftback are the enclosing <div> elements .leftsidebar, .content and .rightsidebar are the <div> elements that have the content.
- Each enclosing <div> corresponds to the background (colour and/or image) of a region. In this example .leftback for .leftsidebar, .contentback for .content and .rightback for .rightsidebar
- Except the outermost one (corresponding to the right most column) all the enclosing <div> elements are given a right offset equal to the width of the element to the right of the element to which it provides background colour. In this example .contentback (provides background colour for .content) is moved left by 300px (which is the width of .rightsidebar). (See image below)
- The .left sidebar, .content and .rightsidebar are floated left and given some width.
- They are given a left offset equal to the sum of widths of all the columns except the left most one. Here it is = width of rightsidebar (300px) and content (400px) = 700px.( B+G)
The image below shows how the enclosing <div> elements, .rightback, .contentback and .leftback, are displaced. The bottom most is the .rigthback element and the top most being the .leftback element.
The dashed lines represent the viewable content as the .rightback element crops the other backgrounds using an overflow: hidden attribute.
In the following image, the black lines below the red line are the content <div> elements .leftsidebar, .content and .rightsidebar as they will appear if they are given float:left and given appropriate widths to fill the entire width.
All the three content elements are given a left offset of C using relative positioning.
C = B+G (see image above)
This method is discussed in much detail in this article.
Advantage:
It works in every browser including Internet Explorer 6. This method doesn’t need JavaScript and is accomplished purely through CSS and HTML.
Disadvantage:
It is not as straightforward as the other methods. It is a little tricky to understand. But it is can be easily created for any number of columns once you understand how to do it.
See this method in action (3 columns) | Same technique used to create four column layout
Final Note
Each method has its advantage and disadvantage but you are most likely to find the last method to work in every browser if you are looking for the purest CSS solution to the equal height columns problem.
Interested in writing a guest post for us like Raja? We’d love to have you! Here’s how to get started.
