This tutorial describes a really simple CSS trick to implement a fake equal height columns effect using the CSS properties position:absolute and border. Before to proceed I suggest you to download my CSS 2 Visual Cheat Sheet for a practical reference guide to CSS 2 properties that can help you understand concepts illustrated in this post.

Image to have this situation: you have to implement a two column layout and you want the height of the sidebar column is equal to the height of the main content column. The following image illustrates our problem:

HTML structure

The first step is to define the HTML structure of our document. In this example I used a simple two columns layout like this:

<div id="wrapper">
    <div id="maincontent">...</div>
    <div id="sidebar">...</div>
</div>

#wrapper

The #wrapper layer will contain our two columns, #maincontent and #sidebar:

#wrapper{
    margin:0 auto;
    width:600px;
}

#maincontent

The #maincontent layer is the left column of the document that will contains the main content of the page (for example the text of posts). The following image illustrates the basic concept I used to implement this trick:


We have to add an extra border to the #maincontent layer (200px) above which will be placed the #sidebar. In this way we’ll have a fake background for the #sidebar, represented by the right border of the #maicontent column, that will have the same height of the #maincontent layer. Here is the CSS code:

#maincontent{
  border-right:solid 200px #DFDFDF;
  position:absolute;
  width:400px;
}

#sidebar

Now we have to define the #sidebar using the following properties:


The width of the #sidebar is the same of the #maincontent right border width (200px) and the property margin-left is equal to the #maincontent layer width. Here is the CSS code:

#sidebar{
    background:#DFDFDF;  
    margin-left:400px;
    position:absolute;
    width:200px;
}

And here is the final result:


In this way the height of the #sidebar column will seem the same of the #maincontent column height.