Button alignment in columns

A common layout issue that I notice happens frequently when building web pages is the multi column ‘card’ style layout that would typically have some content inside each tab with a call to action button at the bottom. A typical example is shown in the image below. (For this example I have used Flexbox to build out the basic layout of the columns.)

It usually starts out on the design with this layout, the copy will be of equal amount in each column and so will the header title. But what happens when we start filling out the columns with copy or adding to it when required? We will quite often end up with cards that are uneven, as depicted in this image.

As you can see here, the copy is of different character counts resulting in the call to action buttons not horizontally aligning evenly. This can actually be quite a difficult issue to solve and often very tempting to just resort to customising the padding in each section until they line up, which is of course very ‘hacky’.

In the past I have always resorted to setting the card section to position: ‘relative’ and the cta to position: ‘absolute’ where I could then set each button to the correct position, but there is a much easier way in which we can utlise Flexbox to get the same result without having to worry about putting in loads of extra code for the absolute positioned buttons to position correctly on mobile.

I have previously set the container of the three cards to flex in order to get them to display side by side in columns and now we are also going to set each of the cards to display: flex as well. In addition to this we will also set flex-direction: column on each item. The button is then wrapped in it’s own DIV container and the margin-top set to auto. Once this is implemented the layout should look like this;

And here is the full HTML code for the section.

To summarise, all we needed to do to fix the buttons was to set each column DIV to display: flex, flex-direction: column and then set the button wrapper DIV to margin-top: auto. Hopefully this has been useful information and I hope to publish another blog soon regarding common CSS problems and solutions.