Issue with Responsive Columns having equal height

Question

Here is my debate, the problem is solved, but I cant figure out why the method used on css-tricks.com didnt work. The only reason I can assume it didnt work was because my c

Answer 1

This seems to work: http://jsfiddle.net/David_Knowles/LQ54K/ Perhaps you can share which bit you didn't understand?

.top_category {
    position: relative; background:none orange; z-index: -1;
}
.top_category:before, .top_category:after,
.categories:before, .categories:after {
   content: " ";
   position: absolute;
   z-index: -1;
   top: 0;
   left: 20%;
   width: 20%;
   height: 100%;
   background: #ccc;
}
.top_category:before {
   left: 0%;
   background: #eee;
}
.top_category:after {
   left: 20%;
   background: green;
}
.categories:before {
   left: 40%;
   background: pink;
}
.categories:after {
   left: 60%;
   background: yellow;
}

In your fiddle, the above code was missing? Which is the bit that actually makes the faux column effect work. Just for clarities sake; these are not the columns you place your content in, and the height of your actual content columns is NOT made to be equal. Only the Pseudo columns — which are placed behind the content — are made equal. Is that perhaps the confusion?