0

I have a couple of elements in columns which are not the same heights(text in the divs is not always the same) so all .top elements need the be de same height as each other, and all .bottom elements needs to be the same height as all .bottom elements. I know this cna be done with javascript but I dont want to use this. Can this be done in CSS?

<div class="row">
  <div class="col">
     <div class="top"></div>
     <div class="bottom"></div>
  </div>
  <div class="col">
     <div class="top"></div>
     <div class="bottom"></div>
  </div>
  <div class="col">
     <div class="top"></div>
     <div class="bottom"></div>
  </div>
</div>
Asons
  • 84,923
  • 12
  • 110
  • 165
user759235
  • 2,147
  • 3
  • 39
  • 77
  • I linked to 2 posts, one using CSS, where you need a markup change, and the 2nd using a script, if to not change markup. – Asons Nov 03 '17 at 09:38

1 Answers1

-3

Yes, it can be done with CSS. This would be one way to do it.

.row {
  display: table;
  width: 100%;
}

.col {
  display: table-cell;
  padding: 15px;
  width: 33%;
}
<div class="row">
  <div class="col" style="background: blue;">
    <div class="top">
      <p>Lorem ipsum Lorem ipsum</p>
      <p> Lorem ipsum Lorem ipsum Lorem ipsum</p>
    </div>
    <div class="bottom">Lorem ipsum</div>
  </div>
  <div class="col" style="background: yellow;">
    <div class="top">Lorem ipsum</div>
    <div class="bottom">Lorem ipsum</div>
  </div>
  <div class="col" style="background: red;">
    <div class="top">Lorem ipsum</div>
    <div class="bottom">Lorem ipsum</div>
  </div>
</div>

Added equal width cols.

Luke Paoloni
  • 164
  • 6