Same Height Block using CSS Table

If you want to get through tutorial video, copy these code below.
1. index.html
2. main.css
3. reset.css

HTML Code (index.html)
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Same Height Block</title>
  <!-- using font awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
    crossorigin="anonymous">
  <!-- using google font -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,600" rel="stylesheet">
  <!-- importing reset and custom css -->
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/main.css">
</head>

<body>
  <div class="container">
    <!-- table method -->
    <div class="holder">
      <h2>Table Method</h2>
      <div class="tableMethod">
        <!-- 1st col -->
        <div class="col">
          <div class="icon">
            <i class="fab fa-html5"></i>
          </div>
          <h3>HTML</h3>
          <p>Lorem ipsum dolor sit amet, nam legimus antiopam et. Ad sed virtute dolores. Ad his nobis virtute. Errem fuisset repudiandae te duo. Vix ei urbanitas democritum reformidans.</p>
        </div>
        <!-- 2nd col -->
        <div class="col">
          <div class="icon">
            <i class="fab fa-java"></i>
          </div>
          <h3>Java</h3>
          <p>At eum ridens possit, cum at dicit habemus. Et simul prodesset interpretaris vix, in mei adhuc abhorreant. Quidam volutpat argumentum vim ea</p>
          <p>Lorem ipsum dolor sit amet, tota phaedrum ut mel. No pri tamquam facilis, vel audire voluptaria quaerendum cu.</p>
        </div>
        <!-- 3rd col -->
        <div class="col">
          <div class="icon">
            <i class="fab fa-node-js"></i>
          </div>
          <h3>Node JS</h3>
          <p>Recteque signiferumque at mea. An brute quaeque nec, vix graece prompta rationibus cu, est id wisi justo recteque. Mei vide cibo detraxit eu, sit ut mollis euismod comprehensam. Probo fabulas eam in. Usu semper referrentur eu, eam idque perfecto in</p>
        </div>
      </div>
    </div>
  </div>
</body>

</html>


CSS Code (main.css)
/* general */

body {
  font: 300 16px/1.5 'Roboto', sans-serif;
  color: #333;
}

.container {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
}

.holder {
  border-bottom: 1px dashed #ccc;
  padding: 30px 0;
  margin: 0 0 30px;
}

h2 {
  font-size: 26px;
  font-weight: 600;
  margin: 0 0 20px;
}

h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 10px;
}

p {
  margin: 0 0 20px;
}

/* styling icons */
.icon {
  font-size: 60px;
  color: #F9690E;
}

.icon .fa-java {
  color: #3498DB;
}

.icon .fa-node-js {
  color: #2ECC71;
}

/* table method */

CSS Code (reset.css)
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
html {
 box-sizing: border-box;
}

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

* {
  max-height: 1000000px;
  margin: 0;
  padding: 0;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}

Video Tutorial


Updated Code (main.css)
/* table method */
.tableMethod {
  display: table;
  text-align: center;
  border-spacing: 20px;
  margin: -20px;
}

.tableMethod .col {
  display: table-cell;
  vertical-align: top;
  width: 33.33%;
  background: #f1f1f1;
  padding: 25px 25px 5px;
}

Share this

Related Posts