We start off by setting the container display to be a table. The HTML sturcture is the same as the above example, only we now alter the CSS. Let’s see the following example to see how it works. This technique uses CSS display property to set the HTML elements to act like a table, and this is my favourite approach when this situation rises. This screenshot below shows how it turns out.Īlternatively, we can achieve the same result using the CSS Table technique. But there are some other situation when this illusion will just fail, such as when add a margin to the main section. In particular situation it just works fine. The sidebar height now “looks equal” to the main section. Let’s apply the Faux Column technique we simply remove the background color from the sidebar and add it to the container, like so: This will result into something as shown in the following screenshot, as expected the height is not equal. We also put more (random) content than in the sidebar.Īfterward, we apply a few styles for the main section and the sidebar to be displayed side by side in the browser and we also add different background colors to them. Donec sed bibendum ante.Īs you can see, we have three div that contain the main section and the sidebar. Vivamus massa sem, cursus vel semper non,ĭictum vitae mi. Lacinia sit amet adipiscing quis, aliquet at erat. Integer sit amet est ac elit vulputate lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Įtiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. The idea of this technique is to create an illusion of equal height by adding background color or image to the container instead of to the sidebar itself.Īlright, let’s see the following example to see how this technique works. Recommended Reading: CSS Back to Basics: Terminology Explained Faux Columnĭan Cederholm firstly introduced the term Faux Column in his post over at A List Apart. There are actually some solutions to this situation, and one that is frequently recommended is the Faux Column technique. In some cases, we want the height to be equal. Commonly, the content that is contained in the main section could be longer than the sidebar, which makes the height of these two sections unequal. Ttraditionally, a website consists of the main section and a sidebar on the layout.

Let’s take a look at an example that utilizes this method. However, you don’t have to since that is the default.

You can set the align-items property to stretch to ensure they have the same height. Once you are done, you can easily equalize their width. With this approach, you only need to take care of a few vendor prefixes to initiate the flex layout. You only need to tweak both the flexbox parent and child to make them appear in a columnar grid. This approach does not require defining row elements for columns. Flexbox Methodįlexbox provides you with a simple and easy approach for creating equal height columns in CSS. If you exceed the limit, you will end up with pretty long pages. However, beware that browsers will not let you throw arbitrarily huge values since they have limits. Equal height columns are a reasonable design goal. For visual integrity, it is very important, especially when at least one column needs a unique background. Why Create Equal Height Columns?įor web designers, sometimes having equal height columns is a necessity. You can achieve this by ensuring that the CSS background of each column shares the same height as the rest.

Having CSS columns same height entails making the columns look as if they have the same height when there is no content inside them. If that was the case, then creating columns of equal height in CSS wouldn’t be a problem since the height would naturally be the same. Equal Height Columns – What Does it Mean?Įqual Height Columns – What Does it Mean?Ĭreating equal height columns does not mean having content of the same height inside each column.

After same height as element css