I am dealing with a catalog of products where all elements are floated left. The challenge I'm facing is that different elements can have varying heights, especially due to the pictures inside being different sizes. This causes an issue where if the middle element in a row is longer than the others, the elements on the second line get stuck to it.
Check out this Fiddle for reference
HTML:
<div class="frame">
<div class="element">
<div></div>
</div>
<div class="element">
<div class="img"></div>
</div>
<div class="element">
<div></div>
</div>
<div class="element">
<div></div>
</div>
<div class="element">
<div></div>
</div>
</div>
CSS:
.element{
float: left;
border: 1px solid black;
margin: 0px 0px 10px 10px;
min-height: 110px;
min-width: 70px;
box-sizing: border-box;
}
.frame{
width: 240px;
overflow: hidden;
border: 1px solid black;
padding: 10px 10px 0px 0px;
}
.img{
height: 130px
}
In the provided example, you can see the illustration of the issue I am encountering. While this is not the exact code, it effectively conveys the problem at hand. I'm looking for a solution that allows me to adjust the height of same-row elements so they match the height of the longest element in that row. Any suggestions on how I can achieve this?