A common web design situation is the necessity to create columns with equal height, regardless of their content. A classic example is newspaper layout, where we have flanked columns containing articles of different lenght: we may have the necessity to color columns with a background tint, and keep them to the same height for a better-looking layout.
The first trick to solve this issue is to display columns as table cells. This technique works fine in all major browsers (including ie8) and offers the advantage to define a clear CSS with a simple class for all columns. There’s no need to specify the position of a single column or the value of its margin, we must only define the width. The disadvantage is that this solution is not very semantic: we are going back to 2000, when layouts were made with tables.
The third trick makes use of the flexbox technique. In this case, we display columns as flexible boxes. This solution has the advantage to be clear and easily customizable. For example, columns width is determined by “flex” property: 1 means that all columns are equally spread, 2 in a column style means that this column has double width of other columns. Furthermore, column ordering can be achieved in a very straight way simply setting “order” property. Unfortunately, this solution has the disadvantage to be incompatible with ie<10, but it surely will represent a cornerstone in layout design for the next years.
In this post, I’ve compared 3 solutions to create equal heights columns. Some of them are extremely flexible and clear but have compatibility problems, expecially with older internet explorer versions. Have you found better solutions or do you use different techniques? Let me know in comments.