2

I have three columns and inside each one there is an element with the class text-container. I want them all to be the same height as the tallest one, without using JavaScript.

This is the code:

<div class="column">
    <!--more elements-->

    <div class="text-container">
        <!--some text-->
    </div>
</div>

<div class="column">
    <!--more elements-->

    <div class="text-container">
       <!--some longer text-->
    </div>
</div>

<div class="column">
   <!--more elements-->

    <div class="text-container">
        <!--some shorter text-->
    </div>
</div>

Is there a way to make text-container the same height without using JavaScript? I know that flexbox can do the trick but that is if all the elements are inside the flexbox element..

ALSD Minecraft
  • 1,421
  • 3
  • 12
  • 18
  • What CSS do you currently have? Divs are block elements by default so what you showed us wouldn't be anything than a single column. – j08691 Apr 08 '16 at 02:39
  • 1
    With flexbox you can make the `.column` divs equal height, because they can exists as siblings in the flex container. However, the `.text-container` divs could not be equal height because they would be cousins, not siblings. You could apply `flex:1` to the `.text-container` divs in a column-direction container, and they could track the height of their parent. But that's probably not what you want. Bottom line: Not possible in pure CSS. – Michael Benjamin Apr 08 '16 at 02:43
  • Your post should have a runnable example, but I agree that it's hard understand matching heights of non siblings. Seems like you should be able to rework the HTML – Ruan Mendes Apr 08 '16 at 02:50
  • Possible duplicate of [CSS - Equal Height Columns?](http://stackoverflow.com/questions/2114757/css-equal-height-columns) – Aziz Apr 08 '16 at 02:59
  • The author wants three children of different elements to have the same height, it's not really possible in CSS. – Drew Lemmy Apr 08 '16 at 03:00
  • If you're desperate, have a look at http://stackoverflow.com/questions/1863672/how-to-make-three-inside-divs-the-same-height?rq=1 which suggests a possible solution using tables. Personally I would suggest tables over JavaScript for layout and I would never suggest tables in the first place, so there's that. – Drew Lemmy Apr 08 '16 at 03:01

2 Answers2

1

I don't do much vanilla js but here is a jQuery solution:

 $(document).ready(function() {
   var maxHeight = -1;
   var col = $('.text-container');
   
   col.each(function() {
     maxHeight = Math.max(maxHeight, $(this).height());
   });

   col.height(maxHeight);
 });
.container {

    overflow: hidden; /* optional */

}

.column {
    margin:2px;  
    float:left;
    border: 1px solid red;
    height:200px;
  
}

.column .text-container {
    margin:2px;
    border: 1px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="column">
        <div class="text-container">
           hello world!  
        </div>
    </div>

    <div class="column">
        <div class="text-container">
            hello world! <br /> 
            hello world!
        </div>
    </div>

    <div class="column">
        <div class="text-container">
            hello world! <br /> 
            hello world! <br /> 
            hello world!
        </div>
    </div>
</div>
Miro
  • 8,402
  • 3
  • 34
  • 72
0

Try using Flexboxes.

First, add a container class to contain your columns if you haven't already. Next, make it a flexbox by adding display: flex; (and necessary vendor prefixes). Additionally if you wish, add height: 100% and overflow: hidden.

In your column class, make it a Flexbox by adding display: flex;. Then, give it a vertical layout by setting flex-direction to column and add flex: 1; to make it grow.

Finally, add flex: 1; to your text-container class.

.container {
    display: -webkit-flex; /* chrome, safari */
    display: -ms-flexbox; /* internet explorer */
    display: flex;
    overflow: hidden; /* optional */
    height: 100%;
}

.column {
    display: -webkit-flex; /* chrome, safari */
    display: -ms-flexbox; /* internet explorer*/
    display: flex;
    flex-direction: column;
    flex: 1;
    border: 1px solid red;
}

.column .text-container {
    flex: 1;
    border: 1px solid blue;
}
<div class="container">
    <div class="column">
        hello!

        <div class="text-container">
            hello world! <br /> 
            hello world! <br /> 
            hello world!
        </div>
    </div>

    <div class="column">
        hello!

        <div class="text-container">
            hello world! <br /> 
            hello world!
        </div>
    </div>

    <div class="column">
        hello! <br />
        hello! <br />
        hello! <br />
        hello!

        <div class="text-container">
            hello world!
        </div>
    </div>
</div>

If, due to compatibility reasons or some other reason (though it's 2016 already), you would prefer something other than Flexboxes, take a look at this article or this answer.

Community
  • 1
  • 1
Drew Lemmy
  • 447
  • 1
  • 4
  • 13
  • And what if the other child elements of the `.column` divs have differing heights? – Michael Benjamin Apr 08 '16 at 02:51
  • Have a look at the snippet I added. It seems it stretches fine if the column's children have differing heights. – Drew Lemmy Apr 08 '16 at 02:53
  • But I want the `text-container` divs to be the same height, not column – ALSD Minecraft Apr 08 '16 at 02:55
  • The OP wants the `.text-container` divs (the blue boxes in your code) the all equal the height of the tallest one. That's not happening in your example. – Michael Benjamin Apr 08 '16 at 02:55
  • That would be a lot more difficult. You might need to get JavaScript involved, I can't think of a way to do this without it. The only other method would be involving tables, which is incredibly stupid. Have you tried reconsidering your site layout? – Drew Lemmy Apr 08 '16 at 02:57
  • It's the way the cient wants it, I'll have to use JS then, thanks anyway! – ALSD Minecraft Apr 08 '16 at 02:58