For a nice organized design, e.g. to present an article overview, you might want to use several div-s with an equal height.

Mattbanks has published an easy to use jQuery plugin to include to your website:
https://github.com/mattbanks/jQuery.equalHeights

To integrate it in your website, simply

  1. download the jquery.equalheights.min.js file to your app,
  2. integrate it after your jQuery reference (see below)
  3. trigger the divs that should be of equal height

Integrate the js files (recommended at the end of your page).

<script language="javascript" src="js/jquery/jquery-1.10.2.min.js"></script>
<script language="javascript" src="js/jquery/jquery.equalheights.min.js"></script>

Trigger the equal height plugin

$(document).ready(function() {
  window.setTimeout(function(){
    $('.equalColumns').equalHeights();
  }, 200);
});

Note, the timeout function is used to trigger the equal height asynchronously. You do not have to do this, but it is recommended if you face any trouble with other JS plugins on your website.

jQuery Plugin for Equal Height Divs

Post navigation


Leave a Reply