Inheriting height from highest column inside a row

Question

I'm having trouble making some kind of feaux-columns effect through Bootstrap. In theory I thought it would be relatively easy for me to inherit the height of another column inside the same row - however in practice it appears not to be so easy.

http://jsfiddle.net/zwcy0nur/

<div class="row slideshow">
 <div class="col-md-3 col-1">
  col 1 contents
  col 1 contents<br />
  col 1 contents<br />
  col 1 contents<br />
  col 1 contents<br />
  col 1 contents<br />
  col 1 contents<br />
 </div>
 <div class="col-md-6 col-2">
  <div class="col-md-10">
   <div class="slider-caption">
    col 2 contents<br />
    col 2 contents<br />
   </div>
  </div>
 </div>
 <div class="col-md-3 col-3">
  col 3 contents
 </div>
</div>

In the jsfiddle I have no styling as such, apart from determined background-colors in order to visualize the height. But the question really is, how can I make col-3 inherit the height of the highest container within this row (currently – because of content – col-1)? I tried my way with defining it's height to be 100%, because I thought that would be 100% of the parent row. Appears it was not.

Any tips is much appreciated

Here's a possible solution for you that I've been using after answering this question. http://stackoverflow.com/questions/26177635/foundation-equalizer-plug-bs-3-2/26183854#26183854 Flexbox as suggested below is possible but it really is exclusively for modern browsers. — jme11, Feb 04 '15 at 12:57

score 0 · Answer 1 · answered Feb 04 '15 at 12:51

0

You could try this. This set of styles here assumes that col-1 and col-2 are of same size. It is not very flexible and not that well supported. Try this while I check for some other solution.

.slideshow {
    height:400px;
    display: flex;
    flex-flow: column wrap;
}

.col-1 {
    background-color: yellow;
    flex: 1;
}
.col-2 {
    background-color: blue;
    
}
.col-3 {
    background-color: red;
    flex: 1;
}

answered Feb 04 '15 at 12:51

Wow. Flex-cells does exactly what I want. Never heard of this function before! It's really sad that it's not so supported since the site I'm working on is targetted toward finance-people (I dont know why. But I expect a lot of these people use older browser technology). Thanks a lot for this tip though! – user3180992 Feb 04 '15 at 13:12
Yeah, It doesn't work on safari. All other browsers have very good support. Just check it out on your platform. It has been around some time now. – Feb 04 '15 at 13:26

score 0 · Answer 2 · answered Feb 04 '15 at 12:57

If you don't need < IE11 support then you can use display: flexbox;on the slideshow container.

.slideshow {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
}

http://jsfiddle.net/zwcy0nur/3/

Otherwise you could use tables or display the div's as table-cells

Inheriting height from highest column inside a row

2 Answers2