Archivi tag: flexbox

Equal height columns

Giorgio Bongiorni

Telecommunication Engineer with more than 5 years experience in web development and SEO campaigns. Favourite languages are HTML5, PHP5, MySql, CSS3 and jQuery.

Latest posts by Giorgio Bongiorni (see all)

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.

Table display

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.

Equal height columns (table display)

Absolute positioning

Another solution is to display columns with an absolute positioning. In this case, we must wrap them with a relative-position container and define a proper left margin for each column. The trick here is to wrap all columns but the last into a class, and write the last column content directly inside the container. To display the last column properly, we must define a padding-left property into container style: this leaves free space for other columns. This solution is quite flexible, since we can swap columns order simply changing margin property, but it requires extra javascript (i.e. selectivizr) to work in older browsers (ie8).

Equal height columns (absolute positioning)

Flexible boxes

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.

Equal height columns (flexbox)

Conclusions

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.