Responsive Equal Height Rows

Responsive Equal Height Rows

by Avinashullal

HTML

<section class="main">
  <article>Gally maroon schooner wench provost fathom haul wind parrel chantey brigantine.</article>
  <article>Ho six pounders Arr black spot port jib hogshead spirits bilge rat Admiral of the Black. Blow the man down measured fer yer chains hail-shot jolly boat gangway pillage lugsail wherry Jolly Roger Privateer.</article>
  <article>Lass gangplank bilged on her anchor bring a spring upon her cable rigging lookout Admiral of the Black sheet wench rutters.</article>
  <article>Driver rope's end port spirits cog fore ye snow sloop hogshead. Belaying pin yo-ho-ho bilge rat come about squiffy spirits jack galleon Brethren of the Coast hang the jib.</article>
  <article>Hail-shot jolly boat gangway pillage lugsail wherry Jolly Roger Privateer.</article>
  <article>Plate Fleet strike colors nipper league warp to go on</article>
  <article>Admiral of the Black sheet wench rutters.</article>
  <article>Jack galleon Brethren of the Coast hang the jib. Blow the man down measured fer yer. Admiral of the Black sheet wench rutters.</article>
</section>

CSS

/*
colors
red: #e51837; rgb(229,24,55)
gray: #808080;
*/


/************Reset**************/

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body,
div,
object,
iframe,
fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

header,
footer,
nav,
section,
article,
hgroup,
figure {
  display: block;
}

legend {
  display: none;
}


/************End Reset**************/


/************Global**************/

body {
  background: #fff;
  color: #000;
  font: 100%/1.4 "HelveticaNeue", "Helvetica", "Arial", sans-serif;
  padding: 0;
  -webkit-text-size-adjust: none;
}

a {
  color: #808080;
  text-decoration: none;
}

a:hover,
a:focus {
  color: #e51837;
}

p {
  margin: 0 0 1em;
}

img,
object,
video {
  max-width: 100%;
  border: 0;
}

a img {
  border: 0;
  outline: 0;
}

h1 {
  font-size: 3em;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 0.2em;
}

h2 {
  font-size: 2em;
  line-height: 1.1;
  margin-bottom: 0.2em;
}

h3 {
  font-weight: normal;
  line-height: 1.1;
  padding-bottom: 0.4em;
  border-bottom: 1px solid #ccc;
}

h1 a,
h2 a,
h3 a {
  display: block;
  color: #000;
}

h1 a:hover,
h2 a:hover,
h3 a:hover {
  color: #e51837;
}

blockquote {
  border-left: 0.5em solid #ddd;
  padding-left: 1em;
  margin-left: 1em;
}

small {
  color: #e51837;
}

input,
textarea {
  border: 1px solid #000;
}

input[type=search] {
  -webkit-appearance: none;
  border-radius: 0;
}

::-webkit-input-placeholder {
  color: #808080;
}

:-moz-placeholder {
  color: #808080;
}


/************End Global**************/


/************Classes**************/

.inactive {
  color: #ddd;
}


/************End Classes**************/


/************Structure**************/

.container {
  max-width: 70em;
  margin: 0 auto;
  padding: 0 1em;
  overflow: hidden;
}

div[role=main] {
  padding-bottom:...

JavaScript

/* Thanks to CSS Tricks for pointing out this bit of jQuery
http://css-tricks.com/equal-height-blocks-in-rows/
It's been modified into a function called at page load and then each time the page is resized. One large modification was to remove the set height before each new calculation. */

equalheight = function(container) {

  var currentTallest = 0,
    currentRowStart = 0,
    rowDivs = new Array(),
    $el,
    topPosition = 0;
  $(container).each(function() {

    $el = $(this);
    $($el).height('auto')
    topPostion = $el.position().top;

    if (currentRowStart != topPostion) {
      for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
        rowDivs[currentDiv].height(currentTallest);
      }
      rowDivs.length = 0; // empty the array
      currentRowStart = topPostion;
      currentTallest = $el.height();
      rowDivs.push($el);
    } else {
      rowDivs.push($el);
      currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
    }
    for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
      rowDivs[currentDiv].height(currentTallest);
    }
  });
}

$(window).load(function() {
  equalheight('.main article');
});


$(window).resize(function() {
  equalheight('.main article');
});

$(document).ready(function() {
  equalheight('.main article');
});