Adapt height of the elements based on siblings height [duplicate] - css

Question

This question already has answers here:
How can I make Bootstrap columns all the same height?
(34 answers)
Closed 6 years ago.
I have a couple of widgets in line depending on screen size. Here is my layout:
<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="widget">
<div class="name">
Block name
</div>
<div class="description">
Some description goes here
</div>
</div>
</div>
<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="widget">
<div class="name">
Block name
</div>
<div class="description">
Some very long description goes here
</div>
</div>
</div>
<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="widget">
<div class="name">
Block name
</div>
<div class="description">
Some description goes here
</div>
</div>
</div>
and styles are the following:
.widget {
width: 100%;
margin: 10px;
padding: 10px;
background-color: white;
//height: auto;
height: 80px;
border: 1px silver solid;
font-size: 18px;
}
.name {
font-weight: bold;
height: 40px;
color: #082654;
}
.description {
color: #4AB6E1;
}
Here is the jsfiddle
The problem is that I want to be them of certain height: e.g.80px, cause its the size that will look nice for almost all cases, but rarely I have some longer content inside widget description and then it goes out of the box. So in this case I'd like its height to adapt to content size and all other widgets to its height too. When I set widgets height to auto - only single widget stretches in height and they look uneven. Any ideas how to change the styles so that to achieve what I need?

Answer 1

I you can use jQuery look at this JSFiddle
https://jsfiddle.net/cnoof9hb/
Uses the following to set the height:-
var maxheight = 0;
$('div div.widget').each(function () {
maxheight = ($(this).height() > maxheight ? $(this).height() : maxheight);
});
$('div div.widget').height(maxheight);

Answer 2

This seems like a perfect time for flexbox, I've made a container div to surround all 3 elements and given it display: flex; I've also given display: flex; to each div bellow that (as these are the bits that need to change size).
Have a look
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.container {
display: flex;
flex-wrap: wrap;
}
.container > div {
display: flex;
width: 33.33%;
}
.widget {
width: 100%;
margin: 10px;
padding: 10px;
background-color: white;
border: 1px silver solid;
font-size: 18px;
}
.widget .name {
font-weight: bold;
height: 40px;
color: #082654;
}
.widget .description {
color: #4AB6E1;
}
<div class="container">
<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="widget">
<div class="name">
Block name
</div>
<div class="description">
Some description goes here
</div>
</div>
</div>
<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="widget">
<div class="name">
Block name
</div>
<div class="description">
Some very long description goes here
</div>
</div>
</div>
<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="widget">
<div class="name">
Block name
</div>
<div class="description">
Some description goes here
</div>
</div>
</div>
</div>
I hope this helps.

Answer 3

you can try using diplay:table
.widget {
width: 100%;
margin: 10px;
padding: 10px;
background-color: white;
//height: auto;
height: 80px;
display:table;
border: 1px silver solid;
font-size: 18px;
}
.name {
font-weight: bold;
height: 40px;
color: #082654;
}
.description {
color: #4AB6E1;
}
<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="widget">
<div class="name">
Block name
</div>
<div class="description">
Some description goes here
</div>
</div>
</div>
<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="widget">
<div class="name">
Block name
</div>
<div class="description">
Some very long description goes here
</div>
</div>
</div>
<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="widget">
<div class="name">
Block name
</div>
<div class="description">
Some description goes here
</div>
</div>
</div>

Answer 4

Use float:left to float an element to make the parent element take the cumulative height of it's childrens' height. Also height:auto; to be used in the parent element, as the height is unpredictable.
.widget {
width: 100%;
margin: 10px;
padding: 10px;
background-color: white;
/*height: auto;*/ /* removed this */
border: 1px silver solid;
font-size: 18px;
/* Added these 2 lines */
float:left;
height: auto;
}
.name {
font-weight: bold;
height: 40px;
color: #082654;
}
.description {
color: #4AB6E1;
}

Answer 5

Try below code it does "Adapt height of the elements based on siblings height" but you may need to change it little bit to suit ur needs
<div class="t-row">
<div class="col">Some description goes here Some description goes here</div>
<div class="col">on goes here</div>
<div class="col">here</div>
<div class="col">Some description goes here Some description goes here Some description goes here Some description goes hereSome description goes here Some description goes here</div>
</div>
and css
.t-row{
display: table-row;
}
.col{
display: table-cell;
width: 25%;
border: 1px solid silver;
padding: 15px;
background-color: white;
}
see fiddle here