Three columns with same height, multiple rows in each with dynamic content

Question

What I’m trying to do is dynamically match the total heights of all three columns, which all have a dynamic amount of content possible. Each column can have a dynamic amount of content, giving them dynamic heights. Here's the layout I'm trying to achieve:

And here's some basic html/css: https://jsfiddle.net/fmpeyton/f1t2jhkt/

HTML:

<div class="column">
  <div class="box">
    <h4>Title</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aliquid dignissimos necessitatibus eaque accusantium, praesentium reprehenderit enim! Perspiciatis, vitae? Eaque qui explicabo sapiente deleniti corporis quo consequatur voluptate at laboriosam!</p>
  </div>
  <div class="box">
    <h4>Title</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, provident.</p>
  </div>
</div>

<div class="column">
  <div class="box">
    <h4>Title</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et laudantium minus, rem delectus id quasi molestias quibusdam deserunt ab accusantium. Temporibus animi omnis id aperiam deserunt fugiat praesentium quia at sunt quaerat officia, voluptates dolore eaque, debitis magni dignissimos quis suscipit ullam esse laudantium, nobis quisquam. Molestiae facilis maxime porro dolor explicabo possimus ipsam non impedit aut in vitae amet deleniti nam dignissimos debitis nemo similique voluptas fuga, dolorum quod, commodi eum laboriosam asperiores. Quos tempore possimus saepe ut nobis, nihil quam doloremque id provident eos molestiae rem facilis, dolor esse, reprehenderit voluptatibus cupiditate ratione amet quo ea ipsum eum. Magni ut esse accusamus itaque rerum dignissimos quod, quos maxime odit, autem omnis molestiae vitae, quaerat, sequi laboriosam alias earum!</p>
  </div>
</div>

<div class="column">
  <div class="box">
    <h4>Title</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aliquid dignissimos necessitatibus eaque accusantium, praesentium reprehenderit enim! Perspiciatis, vitae? Eaque qui explicabo sapiente deleniti corporis quo consequatur voluptate at laboriosam!</p>
  </div>
  <div class="box">
    <h4>Title</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo aperiam dolorum nesciunt saepe fuga autem dolores impedit eveniet perspiciatis obcaecati.</p>
  </div>
</div>

CSS:

* {
  box-sizing: border-box;
}

.column {
  width: 33.33%;
  padding-right: 30px;
  float: left;
}

.box {
  border: 1px solid #ddd;
  margin-bottom: 20px;
  padding: 20px;
  background-color: #eee;
}

h4 { margin-top: 0; }

Without JS or flexbox, I'm not sure this is even possible with dynamic content. Any ideas?

Possible duplicate of [CSS-only masonry layout but with elements ordered horizontally](https://stackoverflow.com/questions/44377343/css-only-masonry-layout-but-with-elements-ordered-horizontally) — TylerH, Aug 24 '17 at 21:36

score 0 · Answer 1 · answered Apr 02 '16 at 08:34

Without flexbox or JS you are pretty much limited to wrapping the columns in a parent div and using CSS Tables.

.parent {
  display: table;
  table-layout: fixed;
}
.column {
  display: table-cell;
  width: 33.33%;
  padding: 0 15px;
  border: 1px solid grey;
}

JSFiddle

* {
  box-sizing: border-box;
}
.parent {
  display: table;
  table-layout: fixed;
}
.column {
  display: table-cell;
  width: 33.33%;
  padding: 0 15px;
  background: pink;
  border: 1px solid grey;
}
.box {
  border: 1px solid #ddd;
  margin-bottom: 20px;
  padding: 20px;
  background-color: #eee;
}
h4 {
  margin-top: 0;
}

<div class="parent">
  <div class="column">
    <div class="box">
      <h4>Title</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aliquid dignissimos necessitatibus eaque accusantium, praesentium reprehenderit enim! Perspiciatis, vitae? Eaque qui explicabo sapiente deleniti corporis quo consequatur voluptate at
        laboriosam!
      </p>
    </div>
    <div class="box">
      <h4>Title</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, provident.</p>
    </div>
  </div>

  <div class="column">
    <div class="box">
      <h4>Title</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et laudantium minus, rem delectus id quasi molestias quibusdam deserunt ab accusantium. Temporibus animi omnis id aperiam deserunt fugiat praesentium quia at sunt quaerat officia, voluptates
        dolore eaque, debitis magni dignissimos quis suscipit ullam esse laudantium, nobis quisquam. Molestiae facilis maxime porro dolor explicabo possimus ipsam non impedit aut in vitae amet deleniti nam dignissimos debitis nemo similique voluptas fuga,
        dolorum quod, commodi eum laboriosam asperiores. Quos tempore possimus saepe ut nobis, nihil quam doloremque id provident eos molestiae rem facilis, dolor esse, reprehenderit voluptatibus cupiditate ratione amet quo ea ipsum eum. Magni ut esse
        accusamus itaque rerum dignissimos quod, quos maxime odit, autem omnis molestiae vitae, quaerat, sequi laboriosam alias earum!</p>
    </div>
  </div>

  <div class="column">
    <div class="box">
      <h4>Title</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aliquid dignissimos necessitatibus eaque accusantium, praesentium reprehenderit enim! Perspiciatis, vitae? Eaque qui explicabo sapiente deleniti corporis quo consequatur voluptate at
        laboriosam!
      </p>
    </div>
    <div class="box">
      <h4>Title</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo aperiam dolorum nesciunt saepe fuga autem dolores impedit eveniet perspiciatis obcaecati.</p>
    </div>
  </div>

</div>

Three columns with same height, multiple rows in each with dynamic content

HTML:

CSS:

1 Answers1