jQuery or JavaScript to make DIV columns same height across across several containers

Question

I have a number of container divs each holding other column divs, I have tried a JavaScript script to make the half column divs resize at the same height. This has worked but this means that all the other half divs on the page resize to that height. See screenshot below. The half divs have the same ID but in different containers. Is there jQuery or JavaScript code that can resize the height across divs within each individual container?

In the screen shot the top row is one container, the bottom row has the div within a different container. I want the bottom row div to resize to match the height of the tallest div within that separate container. But I want to workout several containers that all resize the inner divs across the page.

enter image description here

Part of the code:

<style>
#page{width:85%; text-align:center;margin:auto;}
#row{width:100%;background:yellow;margin-bottom:1%;}
#container{height: auto;display: table;float:left;}
#header{width:100%;background-color: rgb(0, 143, 213); height:50px;}
#full{width:99%;margin:0.5%;background-color:skyblue;}
.half{width:48%; margin:0.5%;padding:0.5%;float:left; background-color:#1589FF;display: table-cell;}
#third{width:32.333%; float:left; margin:0.5%; background-color:skyblue;}
#th2{width:65.66%; float:left; margin:0.5%; background-color:skyblue;}
#quarter{width:23%; margin:0.5%;padding:0.5%; float:left; background-color:blue;height:100px}

</style>

<script type='text/javascript'>
$(window).load(function(){
$(window).resize( function() {

var $column = $('.column'),
    maxHeight = 0;

$column.each( function() {
    $(this).removeAttr('style');
    if($(this).height() > maxHeight) {
        maxHeight = $(this).height();
    } 
});

$column.height(maxHeight);

}).trigger('resize');
});  

</script>

</head>
<body>

<div id="full">Menu</div>
<div id="th2">2/3</div><div id="third">Third</div>
<div id="container">
<div class="half column"><h1>About</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.</div>
<div class="half column"><h1>News</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. 


</div>
</div>

<div id="container2">
<div class="half column">Half<br>more info</div><div id="quarter">Quarter</div><div id="quarter">Quarter</div>
</div>

</div>

Please provide us with at least your HTML. And so you know, a html element should have unique ID and the ID should never appear more than once per page according to the standards. — Tobias
Thank you, but I'm still not sure what you want to achieve, in your code example both half columns are in the same container. Should both half columns be the same height? Which are the other elements you want to resize to the same height? And will the other columns also be inside a container (row)? — Tobias
In the code at the bottom I have a new container2. I want the "half" div in that container to match the height of any div only within that container. The current javascript resizes all half divs to the same size across the page. Thanks. — Daniel Kellaway
Hmm, I think you can do this with no JavaScript. Use height 100% and put a clearfix class on the parent container, the parent will stretch to the height of the highest child. Then define your clearfix class to be clear:both. Follow this: webtoolkit.info/css-clearfix.html — David Gilbertson

Tobias Tobias · Accepted Answer · 2013-05-13T07:30:40

One solution for your problem if you don't want to write one line for each container and loop through its columns would be to either change class to container on the elements with the id containerX. Like:

$('.container').each(function(index, elem){
  var maxHeight;
  $(elem).find('.column').each(function(index, elem) {
    var height = $(elem).height();
    if(height > maxHeight)
      maxHeight = height;
  });
  $(elem).find('.column').height(maxHeight);
});

There can be some syntax error but you should see what I'm trying to do here. In this way you will only resize the columns inside the current container your looping through. But I wonder; have you tried setting the height of columns to 100%? They should never be bigger than it's parent anyway so it wont fill the whole page if not necessary.

Good luck!

jQuery or JavaScript to make DIV columns same height across across several containers

2 Answers