How to create columns with an equal height instead of having the height dictated by the column content.
The problem
See the Pen Height column issue by Jonathan klughertz (@klugjo) on CodePen.
We want all columns to be of the same height.
In this example, we have 3 divs with float: left;
and a fixed width.
Flexbox to the rescue
Simply remove the float: left;
and put all the divs inside another div with display: flex;
. It is as simple as that.
See the Pen Height Column Fix by Jonathan klughertz (@klugjo) on CodePen.