[Pro] How do I get 3 Boxes Next to Each Other Stay the Same Height

This happened to me recently twice - and those were big words, oh yeah, big ones that took me ages to write (darn)!!! So you’re not alone, indeed.

Equal heights:

I’m currently tinkering with Flexbox which is THE solution to make this an easy fix. This looks like:

.aflexboxclass {

display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;

}

This class, applied to the wrapper and each of the column in view does the magic things you’re after. It may sound experimental, to me it’s pretty common these days.

What it does is align the items to stretch as default. Stretch means, all columns “stretch” to its parent height and allows herby different content length for each column.

Cheers

Thomas

PS:

I copied this comment before hit SEND, just in case of…


freewaytalk mailing list
email@hidden
Update your subscriptions at: