Adjust Divs height related to another Div

Question

I have four divs side by side. I'd like the height of them to be the same, and stay the same if one of them resizes. means, if one grows because text is placed into it, the other one should grow to match the height.

Here is my :Fiddle

Please resize the width of answer

Thank you.

Well, there are 2 side-by-side in 2 rows, so do you mean they all 4 should have same height? ... Or all 4 should be on the same row? — Asons
– Asons, Commented Aug 18, 2017 at 9:17
@LGSon, In Smaller Screen that's not a problem. But larger screen it split into 2 lines. so, that time the problem happens. — Melbin Mathai
– Melbin Mathai, Commented Aug 18, 2017 at 9:20
Okay, to make elements on different rows the same height you need a script...elements on the same row can keep same height using CSS, which is normally more important, so they all vertical align properly — Asons
– Asons, Commented Aug 18, 2017 at 9:20
@LGSon All 4 they have same height. Please help me to do this. I am not familiar with scripts. — Melbin Mathai
– Melbin Mathai, Commented Aug 18, 2017 at 9:21
I updated your tags to include script, to attract users with more experience when it comes to script based solutions — Asons
– Asons, Commented Aug 18, 2017 at 9:26

Dmytro Lishtvan · Accepted Answer · 2017-08-18 09:52:00Z

1

here is your solution you should use display:flex

jsfiddle.net/94uvouzw/7/

edited Aug 18, 2017 at 9:52

answered Aug 18, 2017 at 9:47

Dmytro Lishtvan

8088 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vikrant · Accepted Answer · 2017-09-11 07:57:26Z

$(document).ready(function(){ var height; var maxHeight = 0; $(".test").each(function(){ height = $(this).height(); if(height > maxHeight) { maxHeight = height; } }); $(".test").css("height",maxHeight); });

By using jQuery

Demo Fiddle

You can always add JSFiddle to your jquery answer to make it more clear and acceptable.

Collectives™ on Stack Overflow

Adjust Divs height related to another Div

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related