How to Achieve Equal Column Heights Using CSS

Traditionally, websites feature a main content area and a sidebar. Often, the main content is longer than the sidebar, resulting in uneven column heights.

However, there are scenarios where you’d want both columns to have equal heights. One popular solution to this issue is the Faux Column technique.

By implementing this technique, you can create a visually balanced and aesthetically pleasing layout.

See demo

Faux Column Technique Explained

Dan Cederholm first introduced the term “Faux Column” in his article on A List Apart. The concept behind this technique is to create the illusion of equal column heights by applying a background color or image to the container, rather than to the sidebar itself.

Let’s delve into an example to better understand how this technique functions.

<div class="container clearfix">
  <div class="main">Lorem ipsum dolor sit amet...</div>
  <div class="sidebar">Lorem ipsum dolor sit amet...</div>
</div>

As illustrated above, we have three div elements: one for the container and two for the main content and sidebar. Notice that the main content has more text than the sidebar.

Next, we apply specific styles to ensure that the main content and sidebar are displayed side-by-side, each with a different background color.

.container {
  /* Container styles here */
}
.main, .sidebar {
  float: left;
  padding: 20px;
}
.main {
  width: 400px;
  background-color: LightSlateGrey;
}
.sidebar {
  width: 200px;
  background-color: Tomato;
}

This results in columns with unequal heights, as shown in the screenshot below:

To implement the Faux Column technique, we remove the background color from the sidebar and apply it to the container:

.container {
  background-color: Tomato;
}
.main, .sidebar {
  float: left;
  padding: 20px;
}
.main {
  width: 400px;
  background-color: LightSlateGrey;
}
.sidebar {
  width: 200px;
}

Now, the sidebar appears to have the same height as the main content, achieving visual balance.

While this technique generally works well, there are situations where it may not be effective. For instance, adding a margin to the main content can disrupt the illusion, as shown below:

Understanding the CSS Table Technique

Another effective way to achieve equal column heights is through the CSS Table technique. This method leverages the CSS display property to make HTML elements behave like table cells. Personally, this is my go-to approach for handling unequal column heights.

Let’s examine an example to see how this technique operates.

The HTML structure remains the same as in the previous example. The difference lies in the CSS. We start by setting the container’s display property to ‘table.’ Next, we configure the .main and .sidebar elements to display as table-cell. It’s crucial to remove the float property from these elements; otherwise, the table-cell display will not work correctly.

.main, .sidebar {
  float: none;
  padding: 20px;
  vertical-align: top;
}
.container {
  display: table;
}
.main {
  width: 400px;
  background-color: LightSlateGrey;
  display: table-cell;
}
.sidebar {
  width: 200px;
  display: table-cell;
  background-color: Tomato;
}

As mentioned, this approach yields the same visual outcome as shown below. However, unlike the Faux Column technique, this method doesn’t rely on visual tricks. Instead, we set the div elements to act like table cells. As you may already know, the height of each column will automatically adjust to match the tallest one.

• View Demo
• Download Source