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

ADDITION:

This example has columns with borders and a gap between them: http://jsfiddle.net/David_Knowles/Vz5pT/

This is the xtra code that applies the psuedo gaps between columns

.categories li:after {
    background: none #FFFFFF;
    border-color: #555555;
    border-style: solid;
    border-width: 0 1px;
    bottom:0;
    content: "";
    display: block;
    left: 20%;
    margin: 0 0 0 -2px;
    position: absolute;
    top: 0;
    width: 4px;
    z-index: 1;
}
.categories li:nth-child(2):after {left: 40%;}
.categories li:nth-child(3):after {left: 60%;}
.categories li:nth-child(4):after {left: 80%;}

Let me know if there is someting that is not clear.