0

What I want to do is simple in a traditional table but naturally I'm trying to avoid using them in 2018! I want to have content that is in 2x columns per row. The content in these columns is defined within a .box class and this itself consists of two further divs (.col1, .col2).

The text in the .col1 or .col2 divs will always be variable but I want the height of all the .col1/.col2 divs to be the same to avoid any unsightly difference between the left and right columns.

You can see if you run my code snippet how the very first .col1 has more text inside of it than the others. As a result it is not the same height as the .col1 div to the right and this causes the first .col1 and its wrapping box to appear higher than the one to the right.

This question is based on the top answer to this Stack Overflowpost: How do I keep two divs that are side by side the same height? - basically its just a more complex scenario of a similar problem asked there.

.row {
display: flex; /* equal height of the children but not working! */
margin-bottom:5px;
}
.box {
flex: 1; /* additionally, equal width */
}
.col1 {
background-color:azure;
}
.col2 {
background-color:beige;
}
.col1, .col2 {
border: 1px solid;
} 
<div class="row">
  <div class="box">
    <div class="col1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.  Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    <div class="col2">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  </div>
  <div class="box">
    <div class="col1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    <div class="col2">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  </div>
</div>
<div class="row">
  <div class="box">
    <div class="col1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    <div class="col2">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  </div>
  <div class="box">
    <div class="col1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    <div class="col2">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  </div>
</div>
AdamJones
  • 652
  • 1
  • 15
  • 38
  • There's no method of equalising heights between elements that do not share a parent. You can make the rows the same height but there is no way you can equalise the heights of the col boxes inside them. – Paulie_D Mar 21 '18 at 16:32
  • 2
    ...and what's wrong with a `table`? If you're displaying tabular data...it's the pefect and apporpriate choice. Other than that consider CSS tables. – Paulie_D Mar 21 '18 at 16:33
  • https://codepen.io/Paulie-D/pen/VXbLee – Paulie_D Mar 21 '18 at 16:39
  • Ok fair point agreed @Paulie_D, if you want to write an answer I'll check it off! – AdamJones Mar 26 '18 at 14:06

0 Answers0