How can the height of a column be adjusted to match siblings?

Question

I have a number of columns each containing a different amount of content. How can I automatically size these so the height of every column matches the one with the most content?

.col {
  display: inline-block;
  float: left;
  width: 200px;
  min-height: 100px;
  background-color: #eee;
  margin-right: 20px;
  padding: 10px;
}

<div class="col">
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
</div>

<div class="col">
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</div>

score 1 · Answer 1 · answered Jun 30 '22 at 15:23

Don't use float in 2022 for alignign purpose. float is for floating an element within a textblock not for aligning purpose. Use Flexbox or CSS-Grid instead. The only appropriate use-case would be email-templates.

All you need to do is to wrap the columns and apply display: flex to the wrapping element.

.row {
  display: flex;
}

.col {
  width: 200px;
  min-height: 100px;
  background-color: #eee;
  margin-right: 20px;
  padding: 10px;
}

<div class="row">
  <div class="col">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
  </div>

  <div class="col">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
  </div>
</div>

score 0 · Answer 2 · answered Jun 30 '22 at 15:34

wrap the content to display:flex. which will make direct child elements flexible. In simple language set next to each other if(flex-direction:row). -then flex-items child of flex container. Now here your issue was already solved. But to make your layout more flexible I will explain flex: 1 0 calc(100% / 3 - 30px); here when you set flex:1 it will make all child same size. But if add more elements it will set them all next to each other by squeezing them. To stop them squeezing after certain size we use flex-basis. So, here calc(100%/3 - 30px); here 100%/3 set 3 child in row minus 30px as gap:15px also need to be count from each side of child so 2*15px it's 30px. -And yes flex-wrap:wrap will break 4th element to new line.

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  /*To give some space*/
}

.row .col {
  flex: 1 0 calc(100% / 3 - 30px);
  background-color: #eee;
  padding: 10px;
}

<div class="row">
  <div class="col">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
  </div>

  <div class="col">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
  </div>
  <div class="col">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utempor incididunt utempor incididunt utempor incididunt utempor incididunt ut labore et dolore magna aliqua.</span>
  </div>
  <div class="col">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utempor incididunt utempor incididunt utempor incididunt utempor incididunt ut labore et dolore magna aliqua.</span>
  </div>
</div>

How can the height of a column be adjusted to match siblings?

2 Answers2