Responsive layout with matching column heights

I'm attempting to create a responsive display so that a page renders nicely in various screen resolutions.  I have a design concept that has 4 equal width columns.   However, I'm trying to figure out how to make the height of each column adjust to match as well.  For example, in this layout - https://cairn.edu/custom/test2.php - how can I make the height of columns 1, 2 and 3 follow the height of column 4 based on whatever content is in column 4?

I found another example that actually does what I want but it seems to use Bootstrap and I can't put my finger on the code that is actually making it work the way I want.  That page is https://cairn.edu/custom/test5.php.  

Any tips?
benjaminfamAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Juana VillaFront-end DeveloperCommented:
Hi,
You can use the flexbox. This is an article that explains more about it.

When making the parent of the columns in this case ".row" to be displayed "flex," the columns will have the same height and width automatically. Just don't forget to make the ".row" to be displayed block on responsive (example: max-width: 760px); otherwise, on mobile you will have 4 columns right next to each other instead of stack (one on top of each other).

.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

Open in new window

0
Julian HansenCommented:
As Juana has already pointed out FlexBox is the way to go.
Here is a working sample
CSS
.box {
  box-sizing: border-box;
  border: 1px solid black;
  padding: 15px;
  background: #eee;
  width: 25%;
}
.frow {
  display: flex;
  flex-direction: row;
}

Open in new window

HTML
<h2>Flex rows and columns</h2>
<div class="frow">
<div class="box">Small content</div>
<div class="box">Lots and lots and lots of content that won't fit in the box and is going to cause the height of this box
to be way different<br>
from the others</div>
<div class="box">more text</div>
<div class="box">more text</div>
</div>

Open in new window

Working sample here
0
benjaminfamAuthor Commented:
This info is very helpful.  Thank you very much.  One follow-up question.  On the boxes that have less content, is it possible to vertically align what is there in the center of the box rather than the default at the top?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Juana VillaFront-end DeveloperCommented:
Yes, you can.
The magic of display:flex is that you can add it to the children too!

In this case, we already have the parent display: flex in order to have the columns the same height and width
.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

Open in new window


Now, we can make the content vertical-align center by making the columns display:flex and justify the content:
.column {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

Open in new window

0
Julian HansenCommented:
You can do that  with this layout
.box {
  box-sizing: border-box;
  border: 1px solid black;
  padding: 15px;
  background: #eee;
  width: 25%;
  vertical-align: middle;
  display: table-cell;
}
.frow {
  display: table;
}

Open in new window

0
Julian HansenCommented:
Adapting Juan's solution to my earlier sample (I like her's better)
.box {
  box-sizing: border-box;
  border: 1px solid black;
  padding: 15px;
  background: #eee;
  width: 25%;
  vertical-align: middle;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.frow {
  display: flex;
  flex-direction: row;
}

Open in new window

Updated sample here
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
benjaminfamAuthor Commented:
Thank you VERY MUCH to you both!  This was precicely the info I was looking for!
1
Julian HansenCommented:
You are welcome.
1
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.