How To Fix The Height Of The Boxes

I am creating a page here: http://americanbitcoinacademy.com/course-list/ and I want all of my boxes to have a fixed height. Right now if I put height: 500px; it will just messed u

Solution 1:

Use min-height: 550px; on .col-1-3 (no fixed height)

Solution 2:

Sometimes I will write a little javascript to match a bunch of elements to the tallest one of the group, like this:

function fixHeights() {
        matchHeights(1);
    }
    $(document).ready(function () { fixHeights(); })
    $(window).load(function () { fixHeights(); })
    $(window).resize(function () { fixHeights(); })

    function matchHeights(ind) {
        var topHeight = 0;
        $("div[data-match='" + ind + "']").height("");
        $("div[data-match='" + ind + "']").each(function () {
            topHeight = Math.max(topHeight, $(this).height());
        });
        $("div[data-match='" + ind + "']").height(topHeight);
    }

What "matchHeights" will do is find elements with a matching attribute of data-match-# and match their heights. So you could add data-match-1 to your div's and then call matchHeights(1).

Solution 3:

A nice way to achieve what you want is using flexbox

* {
  margin: 0;
  box-sizing: border-box;
}

.flex-row {
  display: flex;
  flex-flow: row wrap;
}

.flex-row .box {
  flex: 0 0 33.333%;
  padding: 16px;
  border: 2px solid #000;
}

<div class="flex-row">
  <div class="box">Lorem ipsum dolor sit amet.
  </div>
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </div>
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore aliquam reprehenderit, quidem ex aut harum iste quas unde earum suscipit.
  </div>
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore aliquam.
  </div>
</div>

If you don't want spaces - you could take a look at this popular plugins - or similar

http://isotope.metafizzy.co/
http://masonry.desandro.com/

Solution 4:

Assigning display: flex; flex-wrap: wrap; on the parent will make all of the elements in a row be the same height - http://codepen.io/anon/pen/WpQLxv

.wpb_wrapper {
  display: flex;
  flex-wrap: wrap;
}