CODEWITHSUNDEEP
css
Evanss
Evanss

Reputation: 23593

Make items equal heights and specify which column they are in with CSS?

I have 2 columns. I need to specify which column items are in, but I also need them to have the same height.

So currently I have this:

https://codepen.io/anon/pen/KyGewd 

* {
  box-sizing: border-box;
}
.cont {
  margin: auto;
  width: 500px;
  display: flex;
}
.row {
  flex-basis: 50%;
  align-self: top;
  border: 1px solid blue;
}
.item {
  background: grey;
  padding: 10px;  
  border: 1px solid green;
}
<div class="cont">
  <div class="row">
<div class="item">
  <h2>Item 1</h2>
  <p>Here is short text</p>
</div>
<div class="item">
  <h2>Item 2</h2>
  <p>Here is short text</p>
</div>
  </div>
  <div class="row">
<div class="item">
 <h2>Item 3</h2>
  <p>Here is Longer text. Here is Longer text. Here is Longer text. Here is Longer text. Here is Longer text. Here is Longer text. Here is Longer text. </p>
</div>
  </div>
</div>

enter image description here

But what I need is this:

enter image description here

I don't want to set the height in pixels as my text is dynamic and the layout is responsive (the 500px width Ive set in my code is just to demonstrate the issue).

I could measure the heights with JavaScript and set a min-height that way but its hacky, is there a CSS solution?

UPDATE - My code example is simplified. In reality I will have a large number of items which need to be sorted "right" or "left". The items and which column they need to be in is dynamic.

Upvotes: 0

Views: 74

Answers (3)

user8893882
user8893882

Reputation: 

* {
  margin:0px;
 padding:0px;
}
html,body{
        width:100%;
}
.cont {
    width: 500px;
     display: table;
    border-spacing: 2px;
    border:1px solid blue;
       border-collapse: collapse;
}
.row {
        display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
.item{
    display: table-cell;
    vertical-align: inherit;
    vertical-align: middle;
    padding:10px;
    word-break:break-all;
}
.item:nth-child(even){
   border:1px solid blue;
   border-bottom:1px solid green;
}
.item:nth-child(odd){
   border:1px solid blue;
   border-bottom:1px solid green;
}
<html>
<body>
<div class="cont">
  <div class="row">
        <div class="item">
          <h2>Item 1</h2>
          <p>Here is short text</p>
        </div>
        <div class="item">
         <h2>Item 2</h2>
          <p>Here is Longer text. Here is Longer text. Here is Longer text. Here is Longer text. Here is Longer text. Here is Longer text. Here is Longer text. . Here is Longer text. Here is Longer text. Here is Longer text. Here i . Here is Longer text. Here is Longer text. Here is Longer text. Here i . Here is Longer text. Here is Longer text. Here is Longer text. Here i . Here is Longer text. Here is Longer text. Here is Longer text. Here i . Here is Longer text. Here is Longer text. Here is Longer text. Here i . Here is Longer text. Here is Longer text. Here is Longer text. Here i . Here is Longer text. Here is Longer text.  Here is Longer text.WW</p>
        </div>
  </div>
  <div class="row">
        <div class="item">
          <h2>Item 3</h2>
          <p>Here is short text</p>
        </div>
        <div class="item">
          <h2>Item 4</h2>
          <p>Here is short text</p>
        </div>
  </div>
  <div class="row">
        <div class="item">
          <h2>Item 5</h2>
          <p>Here is short text</p>
        </div>
        <div class="item">
          <h2>Item 6</h2>
          <p>Here is short text</p>
        </div>
  </div>
  <div class="row">
        <div class="item">
         <h2>Item 7</h2>
          <p>Here is Longer text. Here is Longer text. Here is Longer text. Here is Longer text. Here is Longer text. Here is Longer text. Here is Longer text. . Here is Longer text. Here is Longer text. Here is Longer text. Here i . Here is Longer text. Here is Longer text. Here is Longer text. Here i . Here is Longer text. Here is Longer text. Here is Longer text. Here i . Here is Longer text. Here is Longer text. Here is Longer text. Here i . Here is Longer text. Here is Longer text. Here is Longer text. Here i . Here is Longer text. Here is Longer text. Here is Longer text. Here i . Here is Longer text. Here is Longer text.  Here is Longer text.WW</p>
        </div>
        <div class="item">
          <h2>Item 8</h2>
          <p>Here is short text</p>
        </div>
   </div>
  </div>
  </body>
  </html>

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115174

If ALL the items are required to be the same height, you will need javascript as there is no CSS method to equalise heights as you require.

However, if the "rows" are required to have items that equalise then this is possible using CSS Grid and grid-auto-flow:column.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

.container {
  display: grid;
  grid-auto-flow: column;
}

.item {
  border: 1px solid grey;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}

.left {
  background: rebeccapurple;
  color: white;
  grid-column: 1;
}

.right {
  background: orange;
  grid-column: 2;
}

.small {
  min-height: 32px;
}

.medium {
  min-height: 60px;
}

.large {
  min-height: 120px;
}
<div class="container">
  <div class="item left small">L1</div>
  <div class="item left medium">L2</div>
  <div class="item right large">R1</div>
  <div class="item left large">L3</div>
  <div class="item right small">R2</div>
  <div class="item right medium">R3</div>
  <div class="item left small">L4</div>
</div>

Note that irrepective of the min-heights (which is there for demo purposes only) the items in each "row" are maximised to the height of the tallest item.

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 273080

If you are allowed to change html, you can use flex by making all the element in the same row and use wrap. Then you may control position using order property like this :

* {
  box-sizing: border-box;
}

.cont {
  margin: auto;
  display: flex;
  width: 500px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid blue;
}

.item {
  background: grey;
  padding: 10px;
  border: 1px solid green;
  flex: 0 0 50%;
}

.item:nth-child(1) {
  order: 1;
}

.item:nth-child(2) {
  order: 3;
}

.item:nth-child(3) {
  order: 2;
}
<div class="cont">
  <div class="row">
    <div class="item">
      <h2>Item 1</h2>
      <p>Here is short text</p>
    </div>

    <div class="item">
      <h2>Item 2</h2>
      <p>Here is short text</p>
    </div>
    <div class="item">
      <h2>Item 3</h2>
      <p>Here is Longer text. Here is Longer text. Here is Longer text. Here is Longer text. Here is Longer text. Here is Longer text. Here is Longer text. </p>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions