Equal height columns with foundation 4 and backbone.js

Question

I have an existing project that works with backbone.js and I had to do the frontend using foundation (i did not do the backbone part of it). As it stands it's a two column blog-type of website and of course I need the sidebar and content column to be of equal height at all times. I have three problems:

As I am using foundation you might have guessed, this is a responsive design where the columns have a dynamic width
Using backbone the columns that need to be of equal height won't appear on load/ on document ready, they will come up after a login is done and appended by backbone to the DOM. (I have an empty div where backbone appends the stuff as it is needed)
Furthermore, the sidebar contains a list of items that when clicked, they disappear from the sidebar and appear on the content area, changing the height of the column as the user clicks on tem as of now.

I have tried a few scripts to no avail since I can never get to change the height of the columns after they actually appear on the DOM (I don't know how?) and I'm afraid the css ways of doing this will break my responsive layout/not work when numer 3 is happening.

This is my html, as simple as it is, when it's loaded:

<div class="row home collapse">
    <div class="large-5 columns sidebar home-column">
    </div>
    <div class="large-7 columns content home-column">
    </div>
</div>

Dups: http://stackoverflow.com/questions/2619813/jquery-equal-height-divs, http://stackoverflow.com/questions/11688250/setting-equal-heights-for-divs-with-jquery, http://stackoverflow.com/questions/7053688/jquery-equal-height-columns... and more — elclanrs, May 09 '13 at 07:56
read my question again and you'll know why it's not a dupplicate, those answers don't work in my case — Elaine Marley, May 09 '13 at 08:03
I read it, I don't see how Backbone and Foundation have anything to do with the actual problem, which is getting equal size columns. As long as you run the script when all the content is in the DOM it should work. You may have to re-run it every-time you add or remove content, but that's about it. — elclanrs, May 09 '13 at 08:05
Well, the question then is not about HOW to get the equal height columns but how to do it in this certain environment, don't you think? — Elaine Marley, May 09 '13 at 08:13
The logic to getting equal size columns is "loop all columns, find out which one is bigger, adjust all others to that size". I don't see any other factors affecting this logic. Check your CSS for `!important` that may be overriding the height, but other than that, the framework or grid or whatever you use are not relevant. You could create a detailed example at jsFiddle with Backbone and Foundation, and the script you have so far, maybe I'm missing something. — elclanrs, May 09 '13 at 08:18
you can check it here: http://www.rezoloco.onemaggie.com/djathome (test@gmail.com//test) and then after login you see the columns — Elaine Marley, May 09 '13 at 08:24
@ElaineMarley - I agree with you all. It seems all the answers on this topic go back to jQuery (if there is no CSS solution, somebody should say that but immediately jumping to JS is annoying as "the" answer) — JM4, Sep 05 '13 at 20:25
Look at Foundation 5. It has an equal height column feature built in. — L84, Mar 08 '14 at 05:16

Seed · Answer 1 · 2013-08-14T16:29:35.610

Not sure if this is a good fix if you're already using a framework like Foundation; but check this article out: Equal Height Columns - Cross Browser.

Another solution would be to use background color; however, it is CSS3 dependent. For an example:

.container{
  width: 100%;
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #aaa), color-stop(66.7%, #aaa), color-stop(66.7%, #333), color-stop(100%, #333));
  background-image: -webkit-linear-gradient(left, #aaa 0, #aaa 66.7%, #333 66.7%, #333 100%);
  background-image: -moz-linear-gradient(left, #aaa 0, #aaa 66.7%, #333 66.7%, #333 100%);
  background-image: -ms-linear-gradient(left, #aaa 0, #aaa 66.7%, #333 66.7%, #333 100%);
  background-image: -o-linear-gradient(left, transparent 0, #aaa 66.7%, #333 66.7%, #333 100%);
  background-image: linear-gradient(left, #aaa 0%, #aaa 66.7%, #333 66.7%, #333 100%);
}

.container:after{
  display: table;
  float: none;
  content: "";
}

.container .column1{
  max-width: 66.7%;
  width: 100%;
  float: left;
}

.container .column2{
  max-width: 33.3%;
  width: 100%;
  float: left;
}

The percent should be the same as your block size. The example is for two columns. This is if your markup is similar to this:

<div class="container">
  <div class="column1">
    <p>Some content</p>
  </div>
  <div class="column2">
    <ul>
       <li>Some Items</li>
       <li>Some Items</li>
    </ul>
  </div>
</div>

Equal height columns with foundation 4 and backbone.js

1 Answers1