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 columns are responsive.

Here is a jsfiddle of the problem.

Solution 1 Nicolas Gallagher Method

Wont work, why. Because my client could at any time add another box (tell me to add another box, or minus a box). So I need my code to be responsive. I took the css off btw, but if you can look and tell me how to make this work, it would be nice. My portion i am stuck at is with selecting of the children of the UL.

.pseudo-three-col .col:nth-child(1) { left: 33%; }
.pseudo-three-col .col:nth-child(2) { left: -33.3%; }
.pseudo-three-col .col:nth-child(3) { left: 0; }

Solution 2 jQuery solution

Jsfiddle

My jQuery captures the height of my Unordered List and applies it to my List items height. Works perfectly. But Im a true CSS developer and dont want to jQuery code things that dont need to be. Time constraints have led to this solution.

    $(".basic:last-child").show();
       // Optimalisation: Store the references outside the event handler:
    var catheight = $('ul.categories').height();

    $('ul.categories li.clearfix').css({"height" : "" + catheight + ""});

There are just somethings that need to be done with javascript, hence why the language was created. CSS is not the best method for everything and can have unpredictable results across browser that don't support certain tags. - I'm sure you know this already though. — djowinz, May 16 '13 at 16:34
Im just so frustrated with seeing a tutorial that tells you how to do something, you do everything that it says, and it doesnt, work, I realize i should have left the CSS on and included in my question, but I think this should have worked without jQuery intervention. Thanks for the reply. +1 to ya — Cam, May 16 '13 at 16:41
Simple. Easy. [Equal Height Columns with Flexbox](http://stackoverflow.com/a/33815389/3597276). — Michael Benjamin, Feb 06 '16 at 14:09

Timidfriendly · Accepted Answer · 2013-05-16T17:07:44.113

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?

Thats not exactly what I am looking for, I need the border to surround the content equally on all the lists. Without that I can get that to work. My problem is I cant get the columns to both have the same height and have the borders (which I hate), thank you, but i need something that works with the borders. — Cam, May 16 '13 at 17:08

Timidfriendly · Answer 2 · 2013-05-16T19:12:30.777

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.

Issue with Responsive Columns having equal height

Solution 1 Nicolas Gallagher Method

Solution 2 jQuery solution

2 Answers2

Linked