Loading

3 same height columns with CSS

Some solutions to obtain 3 same height columns with various content in CSS

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>3 same height columns with CSS</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <h1>Create 3 same-height columns</h1>

<h2>With text and <code>columns</code> properties</h2>

<div class="column">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo repellat ab reprehenderit maxime similique, veniam ratione eaque sit unde libero eius, accusamus aspernatur dolorum culpa esse neque perferendis sed, praesentium. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum illum fugit inventore eum ipsa quod hic sed quia veniam labore velit officiis, nemo quisquam ducimus nam quibusdam facilis modi qui. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit dicta, maiores sit laborum quidem! Quod impedit perspiciatis saepe optio minus culpa iste, debitis aperiam ipsa vitae provident neque quo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde non obcaecati suscipit voluptatem. Cupiditate eligendi itaque, libero fugit laudantium aperiam totam nobis ab saepe, veritatis, error ullam molestiae quam sunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores recusandae minus dolor velit vitae nostrum modi dignissimos animi explicabo vel repellendus, rerum praesentium, suscipit nobis facere facilis consequatur provident ab!
Sed, amet, deleniti! Velit, facilis dignissimos, quo vel quasi minus perferendis dolores, nam temporibus modi vitae impedit. Eaque adipisci hic earum nisi repudiandae ut unde doloribus odit qui. Cumque, dicta!
Magni molestiae ipsam iste! Qui mollitia, est accusamus eum debitis quisquam iusto unde facilis. Est incidunt, quas culpa ipsam dolore dignissimos repellendus labore porro magni cum, cumque harum? Non, molestiae.</div>

<h2>With the content you want and <code>display:table</code></h2>
<div class="table">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit quia, quam delectus sequi odio fugit pariatur architecto, deleniti exercitationem quae adipisci ipsum ullam officia ea!</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur adipisci, quod voluptates, vel nostrum ea distinctio, a tempore voluptas reiciendis doloremque veniam, accusantium. Veritatis ipsum modi doloribus enim sint magnam, delectus dolorum, aperiam! Eaque dolor, veniam eum sunt dolorem nostrum. Dolores, corporis! Magnam, amet quas? Voluptates eaque quaerat quia inventore, earum eveniet hic alias rem atque neque ab, reprehenderit dolore culpa, blanditiis! Maiores enim rerum architecto voluptatibus cumque. Debitis accusamus ea aut incidunt voluptatibus quibusdam rem sint laboriosam qui sit odio expedita illum iste consectetur fugit eaque commodi pariatur, porro ex delectus officia ratione necessitatibus totam. Necessitatibus est autem et.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque velit dolores ipsa maiores molestias minus iusto nulla consequatur saepe. Aspernatur nulla optio laborum ducimus dignissimos nisi itaque aliquam doloremque, iure qui. Corporis quas atque minus, eveniet delectus officiis dolor, neque, animi, deleniti adipisci esse! Ullam nesciunt, nemo fugit totam itaque.</div>
</div>

<h2>With the content you want and <code>display: flex;</code></h2>
<p>The best solution!</p>
<div class="flexbox">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam quibusdam corporis officiis consequatur eveniet at ipsa deleniti consectetur fugiat similique illo alias perspiciatis quam repellendus, quisquam mollitia error corrupti vitae ut expedita numquam nemo aspernatur ratione maxime! Amet ea commodi itaque voluptatibus. Dolor repellat consequatur dicta ab repudiandae quo architecto.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea quos dicta, reprehenderit laborum! Quidem repellendus culpa, quisquam laboriosam quam ducimus id sit fugit obcaecati aspernatur.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi explicabo, amet debitis natus enim magnam eos ab voluptate minima delectus. Tenetur porro possimus obcaecati harum facere est tempore cum enim dignissimos ducimus, eum illo quam cupiditate vel iusto voluptatum nesciunt nobis velit at, voluptatibus quos. Repudiandae nulla alias iure eligendi, saepe libero et dolor tempora.</div>
</div>
  
  
</body>
</html>
/* Downloaded from https://ahoj.co.uk/ */
/* COLUMNS partial solution */
.column {
  padding: 25px;
  -webkit-columns: 3;
     -moz-columns: 3;
          columns: 3;
  -webkit-column-rule: 15px solid #F2F2F2;
     -moz-column-rule: 15px solid #F2F2F2;
          column-rule: 15px solid #F2F2F2;
  background: #fff;
  background-clip: content-box;
}


/* TABLE solution */
.table {
  display: table;
  width: 100%;
  border-collapse: separate;
}
.table div {
  display: table-cell;
  width: 33.3333%;
  background: #FFF;
  border: 5px #F2F2F2 solid;
  padding: 20px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset;
}


/* FLEXBOX solution */
.flexbox,
.flexbox > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.flexbox > div {
  width: 50%;
  padding: 20px;
  margin: 10px;
  background: #FFF;
  box-shadow: 0 0 3px rgba(0,0,0,0.05)
}









/* Useless code */
body {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 0.95em;
  color: #333;
  background: #F2F2F2;
}
h1, h2 {
  font-weight: lighter;
  text-align: center;
}
h1 {
  font-size: 2.5em
}
h2 {
  margin-top: 4em;
}
h1+h2 {
  margin-top: 1.5em;
}
h2 + p {
  text-align: center;
  color: #555;
}
/* Downloaded from https://ahoj.co.uk/ */

This awesome code is write by Geoffrey Crofte, you can se more from this user in the personal repository