jQuery Equal Height Divs

Question

If i have the following markup;

<div id="container">
  <div id="box">
    <div id='sameHeight'>One<br>two<br>three</div>
    <div id='sameHeight'>four</div>
    <div id='sameHeight'>five</div>        
  <div>
  <div id="box">
    <div id='sameHeight'>four</div>
    <div id='sameHeight'>six</div>
    <div id='sameHeight'>seven<br>eight</div>
  <div>
</div>

How can I ensure that all divs marked as "sameHeight" are the same height as their counterparts in the other div?

I had a look at the equalHeights plugin but that assumes all divs side by side are in the same parent. I need one that can either traverse parents or allow me to specify parents.

Is there such a thing or do I need to write it?

EDIT

I seem to have caused some confusion in my explanation so I hope this clears things up a little.

Looking at the new markup, the container is a simple box.

The "box" divs sit side by side.

Each sameheight div then sits one under the other within its parent.

The thing i'm trying to solve is to have each of the sameHeights that match to it's opposite side the same height.

it should look like a grid i guess w/out using a grid.

I hope this helps.

EDIT 2

This is so far what I have come up with but is there a better way?

function SetHeights() {
    var numLines = $('#container>div:eq(0) .sameHeight').length;

    for (var t = 0; t < numLines; t++) {
        var leftHeight = $('#container>div:eq(0) .sameHeight:eq(' + t + ')').outerHeight();
        var rightHeight = $('#container>div:eq(1) .sameHeight:eq(' + t + ')').outerHeight();

        if (leftHeight > rightHeight) {
            $('#container>div:eq(1) .sameHeight:eq(' + t + ')').css({ height: leftHeight });
        }
        else {
            $('#container>div:eq(0) .sameHeight:eq(' + t + ')').css({ height: rightHeight });
        }
    }
}

Answer 1

<div id='parentDiv'>
  <div>
      <div id='sameHeight'>One<br>two<br>three</div>
      <div id='sameHeight'>four</div>
      <div id='sameHeight'>five</div>        
  <div>
  <div>
      <div id='sameHeight'>four</div>
      <div id='sameHeight'>six</div>
      <div id='sameHeight'>seven<br>eight</div>
  <div>
</div>

and in JavaScript using jQuery write :

$(document).ready(function () {    
    $("div.parentDiv div div.sameHeight").css({ height: "100px" });
});

Answer 2

Firstly, you are probably aware only one element should have any one id attribute. So I have changed the selectors as if they were classes to classes below. Even though you may not give a care about W3C standards, browsers or JavaScript API, etc may rely on this behaviour and not work now or in the future.

   $(document).ready(function () {    
        $('div.parentDiv > div').each(function() {

        var $sameHeightChildren = $(this).find('.sameHeight');
        var maxHeight = 0;

        $sameHeightChildren.each(function() {
            maxHeight = Math.max(maxHeight, $(this).outerHeight());
        });

        $sameHeightChildren.css({ height: maxHeight + 'px' });


    });
});

Note: If you want them all to be the same height despite their parent div, this is what you want.

$(document).ready(function () {    
        var $sameHeightDivs = $('.sameHeight');
        var maxHeight = 0;
        $sameHeightDivs.each(function() {

            maxHeight = Math.max(maxHeight, $(this).outerHeight());

        });

        $sameHeightDivs.css({ height: maxHeight + 'px' });
});

This will set them to all be the height of the tallest, per parent div element.

Also, this answer may show you some other options.

Note too that if the content inside changes again (perhaps via JavaScript), you will need to call this again, or put it in a setInterval() which I do not recommend.

Answer 3

Why not just use a table?

Imho, doing layout in javascript like this is far more evil than doing the layout via tables. What happens if the user resizes their browser? You have to capture the resize event, but then you get a certain laggyness when resizing that makes your website look unpolished.