CODEWITHSUNDEEP
zurb-foundation
Piet
Piet

Reputation: 2208

Make columns always equal height? (Foundation 5)

How to create a layout as shown in the image? The first column left and the second column right should always be the same height, depending of the first column height, using Foundation 5.

enter image description here

Upvotes: 1

Views: 3331

Answers (1)

Tomer Almog
Tomer Almog

Reputation: 3868

Foundation equalizer will make them even, but based on the longer one. http://foundation.zurb.com/docs/components/equalizer.html

you can use jQuery to do it yourself like this (this can work with many columns, and with any column as the one determining the size:

$(document).ready(function() {
  sizeRow();

  function sizeRow() {
    var $col = $('.sizeRow .size-by-me');
    var height = $col.height();
    $col.siblings('.size-me').height(height);
  }
});
.small-6 {
  float: left;
  width: 50%;
}
.col1 {
  height: 400px;
  background-color: #F00;
}
.col2 {
  height: 200px;
  background-color: #FF0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="row sizeRow">
  <div class="small-6 columns size-by-me col1">Column 1</div>
  <div class="small-6 columns col2 size-me">Column 2</div>
</div>

Upvotes: 2

Related Questions