CSS two equal columns with dynamic height

Question

My question is how do I arrange each element to achieve this output? Note that each item is generated dynamically. Due to framework limitation, flex is not supported.

.col {
  display: block;
  float: left;
}

.w50 {
  width: 50%
}

<div class="col">

  <div class="col w50" style="background-color: #aaa">
    <div>
      <strong>Item 1</strong>
    </div>
    <div>
      <span>Remarks : Bacon ipsum dolor amet buffalo prosciutto doner biltong kevin porchetta, spare ribs meatloaf shankle. </span>
    </div>
  </div>


  <div class="col w50" style="background-color: #bbb">
    <div>
      <strong>Item 2</strong>
    </div>
    <div>
      <span>Remarks : Hello world</span>
    </div>
  </div>


  <div class="col w50" style="background-color: #ccc">
    <div>
      <strong>Item 3</strong>
    </div>
    <div>
      <span>Remarks : Sample</span>
    </div>
  </div>


  <div class="col w50" style="background-color: #ddd">
    <div>
      <strong>Item 4</strong>
    </div>
    <div>
      <span>Remarks : Hello world</span>
    </div>
  </div>


</div>

Carl Edwards · Accepted Answer · 2017-12-12T03:45:32.393

Being that you can't manually add in parent elements to this page you'll have to float them instead. To get them to stack you apply a clear: both to the first element of the second row (3rd one).

Your last task is to get them to have an equal height. For this you apply an arbitrary margin and padding while your overall parent container col has an overflow of hidden. Credit for this technique in particular goes to this post here

.col {
  overflow: hidden;
}

.w50 {
  width: 50%;
  margin-bottom: -500px;
  padding-bottom: 500px;
  float: left;
}

.w50:nth-of-type(3n) {
  clear: both;
}

<div class="col">
  <div class="col w50" style="background-color: #aaa">
    <div>
      <strong>Item 1</strong>
    </div>
    <div>
      <span>Remarks : Bacon ipsum dolor amet buffalo prosciutto doner biltong kevin porchetta, spare ribs meatloaf shankle. </span>
    </div>
  </div>


  <div class="col w50" style="background-color: #bbb">
    <div>
      <strong>Item 2</strong>
    </div>
    <div>
      <span>Remarks : Hello world</span>
    </div>
  </div>


  <div class="col w50" style="background-color: #ccc">
    <div>
      <strong>Item 3</strong>
    </div>
    <div>
      <span>Remarks : Sample</span>
    </div>
  </div>


  <div class="col w50" style="background-color: #ddd">
    <div>
      <strong>Item 4</strong>
    </div>
    <div>
      <span>Remarks : Hello world</span>
    </div>
  </div>
</div>

Hi @Carl Edwards, thanks for answering. I've noticed that you grouped each items into two. My problem is that each items is generated dynamically. — kmhigashioka, Dec 12 '17 at 02:54

CSS two equal columns with dynamic height

1 Answers1