How to ensure three DIV are the same height regardless of content

Question

<div class="section group">
<div class="col span_1_of_3 articleTeaserBoxColor">
    <div class="test2n">
        <div class="imgHolder"><img id="NewsArticle_2790_image" class="imgArtThumb" title="" alt="" src="artOne.png" /></div>
        <div class="textHolder">
            <div class="textHolderTop"><a href="/template.aspx?id=2790" class="" title="">Care on the Fast Track</a></div>
            <div class="textHolderBottom">The National Cancer Institute</div>
        </div>
    </div>
</div>
<div class="col span_1_of_3 articleTeaserBoxColor">
    <div class="test2n">
        <div class="imgHolder"><img id="NewsArticle_2792_image" class="imgArtThumb" title=" alt="" src="artThree.png" /></div>
        <div class="textHolder">
            <div class="textHolderTop"><a href="/template.aspx?id=2792" class="" title="">Stay Connected</a></div>
            <div class="textHolderBottom">tool for interacting with your provider and following your healthcare</div>
        </div>
    </div>
</div>
<div class="col span_1_of_3 articleTeaserBoxColor">
    <div class="test2n">
        <div class="imgHolder"><img id="NewsArticle_2791_image" class="imgArtThumb" title="" alt="" src="artTwo.png" /></div>
        <div class="textHolder">
            <div class="textHolderTop"><a href="/template.aspx?id=2791" class="" title="">Know When Antibiotics Work and When They Don't</a></div>
            <div class="textHolderBottom">If you or your child has a virus, antibiotics will not help you or him/her</div>
        </div>
    </div>
</div>
</div>

CSS:

.imgArtThumb
{
    max-width: 100%;
    height: auto;
}
.imgHolder
{
    float: left;
    display: inline-block;
    width: 43%;
    padding-right: 2%;
    height: 100%;
}
.textHolder
{
    float: left;
    display: inline-block;
    width: 55%;
    height: 100%;
}
.textHolderTop
{
    width: 100%;
    height: 48%;
    text-align: left;
    padding-bottom: 2%;
    overflow: hidden;
}
.textHolderBottom
{
    width: 100%;
    height: 48%;
    overflow: hidden;
    text-align: left;
    padding-bottom: 2%;
}
.test2n
{
    text-align: left;
    height: 95%;
    width: 95%;
    padding: 2%;
    overflow: hidden;
}
.articleTeaserBoxColor
{
    box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(238,146,85,1);
}
/*  COLUMN SETUP  */
.col {
    display: block;
    /*float:left;*/
    display: inline-block;
    margin: 1% 0 1% 0;
}
.col:first-child {
    margin-left: 0;
}
.span_1_of_3 {
    width: 32.2%;
}
/*  GROUPING  */
.group:before, .group:after {
    content: "";
    display: table;
}
.group:after {
    clear: both;
}
.group {
    zoom: 1; /* For IE 6/7 */
}
/*  SECTIONS  */
.section {
    clear: both;
    padding: 0px;
    margin: 0px;
    height: auto;
    overflow: auto;
    text-align: center;
    width: 100%;
}

displays this:

enter image description here

How can I modify my CSS to ensure the three boxes (the one with the box shadow) height matches that of the box with the most text (The middle box should be the same height, but because of content it is shorter).

Any content within a box, which is less than the box with the most text, will have blank space, which is fine.

This is what I would like it to be:

enter image description here

Here is some decent code to start with: http://jsfiddle.net/sheriffderek/ae2sawnn/ --- as far as equal heights... is the layout responsive? Will there ever be more than 3? — sheriffderek, Oct 15 '14 at 16:10
Do you want each box to take on the height of it's highest buddy? You are most definitely going to either have to set absolute heights or use some javascript... you could use table-cell... but that isn't flexible. Trash that idea. — sheriffderek, Oct 15 '14 at 16:12

Arbel · Accepted Answer · 2014-10-15T17:37:32.630

3

There are several ways and methods, but here's a quick one:

.col {
    display: table-cell;
    vertical-align: top:
}

Demo http://jsfiddle.net/Lg9y9s93/1

edited Oct 15 '14 at 17:37

answered Oct 14 '14 at 16:01

Arbel

30,599
2
28
29

That is good except I would like the color box to be same height, I updated my question to show what I would like. Thanks. – SearchForKnowledge Oct 14 '14 at 16:06
I am using Media Queries but for some reason it is not using the CSS... has a strike through it. – SearchForKnowledge Oct 14 '14 at 16:12
1

@SearchForKnowledge If this answers the asked question then it's good. Issue on media queries is probably another question that needs to be asked separately! – Arbel Oct 14 '14 at 16:51
Thank you. I will open a new question. – SearchForKnowledge Oct 14 '14 at 17:34
Here is the new question. Pleas help. http://stackoverflow.com/questions/26367470/why-media-queries-not-using-the-correct-css – SearchForKnowledge Oct 14 '14 at 18:12

score 2 · Answer 2 · answered Oct 15 '14 at 15:34

Are Flexbox or jQuery possibilities? As others have mentioned the only pure CSS way (at the moment) is via table-cell which I'm not a huge fan of.

If jQuery is possible there's a fairly simple script I use to make heights match:

CSS:

.item{
  float: left;
  width: 280px;
}

jQuery:

// Set 'x' number of items to the tallest height
var tallestBox = 0;

$(".item").each(function() {
  var divHeight = $(this).height();

  if (divHeight > tallestBox){
    tallestBox = divHeight;
  }
});

// Apply height & add total vertical padding
$(".item").css("height", tallestBox + 30);

Or if Flexbox is possible (modern browsers) this is crazy easy now:

CSS:

.contain{
  display: flex;
  flex-direction: row;
}

Sure thing - a caveat with my JS solution is responsive isn't too great. You'd have to re-fire it when the widths change. — geebru, Oct 16 '14 at 14:22

volter9 · Answer 3 · 2014-10-14T16:49:15.887

1

You can use pseudo table layout: http://jsfiddle.net/8rvdkyke/

.content {
    display: table;
    width: 400px;
}

.content > div {
    display: table-cell;
    height: 100%;
    vertical-align: top;
}

This listing of code is emulating behavior of table layout causing all children div's to be the same height. You can tweak the sizes and other styles for your needs.

UPD: For responsive layout out, you can switch between table-cell and table-row to make them arranged horizontally (table-cell) and vertically (table-row): http://jsfiddle.net/8rvdkyke/1/

edited Oct 14 '14 at 16:49

answered Oct 14 '14 at 16:03

volter9

737
5
16

I am making it responsive and when it reaches certain width I would like the display to be block instead of table-cell. – SearchForKnowledge Oct 14 '14 at 16:20
You can change `table-cell` to `table-row` for mobile, it would make them arranged vertically. See the UPD – volter9 Oct 14 '14 at 16:47
http://stackoverflow.com/questions/26367470/why-media-queries-not-using-the-correct-css (just an issue with media queries) – SearchForKnowledge Oct 14 '14 at 18:12

score 0 · Answer 4 · answered Oct 15 '14 at 16:25

This is how I do this (as of this date)

http://jsfiddle.net/sheriffderek/ae2sawnn/

HTML

<section class="your-section">

    <ul class="block-list">
        <li class="block">
            <a href="#">
                <div class="image-w">
                    <img src="http://placehold.it/1600x900" alt="your-image" />
                </div>
                <div class="text-w">
                    <p><strong>Might as well have the whole thing a link</strong> and not just that little bitty part of a sentence... etc... etc...</p>
                </div>
            </a>
        </li>

        <li class="block">
            {{ ... }}
        </li>

        <li class="block">
            {{ ... }}
        </li>

    </ul>

</section> <!-- .your-section -->

CSS

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

.your-section {
    width: 100%;
    float: left;
}

.block-list {
    width: 100%;
    float: left;
    list-style: none;
    margin: 0; padding: 0;
}

.block {
    width: 100%;
    float: left;
    padding: .5rem;
    margin-bottom: 1rem;

    border: 1px solid red;
}

.block a {
    display: block;
}

.image-w {
    width: 100%;
    float: left;
}

.image-w img {
    display: block;
    width: 100%;
    height: auto;
}

.text-w {
    width: 100%;
    float: left;
}


@media (min-width: 600px) {

    .block {
        width: 33%;
        margin-bottom: 0;
    }

} /* end break-point 1 */

JS

// resources
// http://stackoverflow.com/questions/14167277/equal-height-rows-for-fluid-width-elements

// @popnoodles 's answer on S.O. 

$.fn.extend({

    equalHeights: function(){

        var top = 0;
        var row = [];
        var classname = ('equalHeights'+Math.random()).replace('.','');

        $(this).each(function(){

            var thisTop = $(this).offset().top;

            if ( thisTop > top ) {

                $('.'+classname).removeClass(classname); 
                top = thisTop;

            }

            $(this).addClass(classname);

            $(this).outerHeight('auto');

            var h = (Math.max.apply(null, $('.'+classname).map(function(){ return $(this).outerHeight(); }).get()));

            $('.'+classname).outerHeight(h);

        }).removeClass(classname);
    }      
});

$(function(){ // call the function
  $(window).resize(function() {
    // on resize... but also... trigger that once by default right off the bat
    $('.block').equalHeights();
  }).trigger('resize');
});

That js is a little heavy... but I use it for larger grids... and since I already call it... I would also use it in situations like this... but @geebru 's JS is great for something simple like this. — sheriffderek, Oct 15 '14 at 16:35
Also, see this grid... the other reason why this JS is good... is because when you resize your window... is sizes based on row... so one column wouldn't change their sizes: http://codepen.io/sheriffderek/pen/nJwqH?editors=001 - Good luck. — sheriffderek, Oct 15 '14 at 16:40
That doesn't work. If you add more text to one of the columns the height of that column changes and the other remain the same. The questions specifically says "How to ensure three DIV are the same height regardless of content" — David Martins, Aug 04 '23 at 19:50
This was almost 10 years ago. We now have flex and grid and it's always going to depend on the situation. You can try them out and answer the question yourself. : ) — sheriffderek, Aug 08 '23 at 23:18

How to ensure three DIV are the same height regardless of content

4 Answers4

HTML

CSS

JS

Linked