0

I got two columns that I want to have in the same hight. Both are adjusting height after the content (height auto). So sometimes one of my columns has a bigger height then the other one. And I want them to be in the same height (and adjust after the content).

I have tried to solve this with table-cell but I did'nt get it to work (one of the columns always was 10px or so smaller then the other one). I have also tried to use row-eq-height but that did'nt make any difference.

So can anyone tell me what the best way is to get two paralell BS columns (col-md-3 and col-md-7 in the code) to get the same height, and auto-adjust to content?

Here is my Markup:

<div class="row"> <!-- START BS ROW -->
    <div class="col-md-1"> <!-- START BS COL-MD-1 -->
    </div> <!-- END BS COL-MD-1 -->
    <div class="col-md-3 zeropadding-right"> <!-- START BS COL-MD-4 -->
        <div class="singleheader-list-style"> <!-- START SINGLEHEADER-LIST-STYLE -->
            <!-- CONTENT -->
        </div>
    </div> <!-- END BS COL-MD-3 -->
    <div class="col-md-7 zeropadding-left"> <!-- START BS COL-MD-7 -->
        <div class="singleheader-content-style"> <!-- START SINGLEHEADER-CONTENT-STYLE -->
            <!-- CONTENT -->
        </div> <!-- END SINGLEHEADER-CONTENT-STYLE -->
    </div> <!-- END BS COL-MD-7 -->
    <div class="col-md-1"> <!-- START BS COL-MD-1 -->
    </div> <!-- END BS COL-MD-1 -->
</div> <!-- END BS ROW -->

Here is my CSS:

/***** SINGLEHEADER CONTENT AREA STYLING *****/

.singleheader-content-style {
    background-color:#fff;
    border-right: 1px solid #9c9c9c;
    padding:20px;
}

.singleheader-content-style h1,h2,h3,h4,h5,h6 {
    margin-top:0px; /* Change bootstrap default */
    color:#de1b1b;
}

/***** SINGLEHEADER LIST AREA STYLING *****/

.singleheader-list-style {
    background-color:#fff;
    border-left: 1px solid #9c9c9c;
    border-right: 1px solid #9c9c9c;
    padding:20px;
}

.singleheader-list-style h1,h2,h3,h4,h5,h6 {
    margin-top:0px; /* Change bootstrap default */
    color:#de1b1b;
}

Yes, I know this question is asked for example here: How can I make Bootstrap columns all the same height? but that QA is from 2013. I want to know if there is a better way to solve this now adays, with example flex-box and how to do it. I have been looking here: http://getbootstrap.com.vn/examples/equal-height-columns/ But it is'nt working for me.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Alex
  • 1,988
  • 3
  • 14
  • 20

2 Answers2

0

You could use jquery for that. Get the height of the taller element and set it to the smaller one. There is a stackoverflow question about that and I have used it in the past and it works.

Community
  • 1
  • 1
Mihai Amihailesei
  • 1
  • 1
  • Yes I know I can do that! But feels like no reason to use jquery for something that can be done with HTML and CSS :) – Alex Aug 18 '15 at 11:09
  • Unless they changed the way html and css work you can't. CSS and HTML don't know what height they will have unless you tell them specifically. If your page will have static content you could hack it up using @media. Otherwise jQuery is your only way to go. – Mihai Amihailesei Aug 18 '15 at 11:20
  • Well, you can solve this with table-cell but I thougt it must be a better solution then that now adays. And also as the answer above says many people suggest this is possible to solve with flex-box. But I can't get it to work :) – Alex Aug 18 '15 at 11:38
0

I think you can use this (flexbox technique), just add class row-eq-height beside class row with css as below (and a bit modify your css)

HTML

<div class="row row-eq-height">
    <!--Whatever content you want-->
</div>

CSS

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.singleheader-list-style {
    background-color:#fff;
    border-left: 1px solid #9c9c9c;
    border-right: 1px solid #9c9c9c;
    padding:20px;
    height:100% /*--New Attribute--*/
}
.singleheader-content-style {
    background-color: #fff;
    border-right: 1px solid #9c9c9c;
    height: 100%; /*--New Attribute (just for sure in case your left col taller)--*/
    padding: 20px;
}

Hopr this help for you!

Eezo
  • 1,586
  • 2
  • 15
  • 25
  • I did try this. But I did'nt add the CSS, I thought row-eq-height was a part of bootstrap? I will try this again. – Alex Aug 18 '15 at 11:24
  • the first time i use it i though that too but i can't find the class name as well as it attributes in boostrap css file so i think i miss something, so i double check and found this; a little trickier for the trick itself, right? – Eezo Aug 18 '15 at 11:33
  • Tried it again now. I does not make any difference for me. Everything still looks the same – Alex Aug 18 '15 at 11:39
  • @Alex edited, check it again and tell me the result – Eezo Aug 18 '15 at 13:00