CSS - making multiple children the height of the tallest child

Question

How do I make both of the fieldsets be the height of the tallest one? Here's the code, which can also be seen at http://jsfiddle.net/zpcXQ/2/

<div id="parent">

  <form>
    <fieldset id="left">
        <legend>Left</legend>
        <p>line 1</p>
        <p>line 2</p>
        <p>line 3</p>
    </fieldset>

    <fieldset id="right">
        <legend>Right</legend>
        <p>line 1</p>
    </fieldset>
  </form>

</div>

fieldset {
    border: 1px solid green;
    width: 48%;
    position: relative;
}

#parent {
    float: left;
    width: 600px;
    position: relative;
}

#left {
    float: left;
}

#right {
    float: left;
}

Possible dup of http://stackoverflow.com/questions/7855747/how-to-make-three-columns-the-same-height, http://stackoverflow.com/questions/2168573/same-height-of-columns-with-960-gs, more. I suppose people keep asking this because there's no great, canonical solution. I like the faux-columns approach. — ben author, Mar 30 '12 at 19:57

score 0 · Answer 1 · answered Mar 30 '12 at 20:34

You can do this by using jquery as following:

var fieldSets = $("fieldset").toArray();
var highest = 0;
for(var i=0; i< fieldSets.length; i++){
    var tempHeight = $(fieldSets[i]).height();
    if(tempHeight > highest){
        highest = tempHeight;
    }
}
$("fieldset").height(highest);

CSS - making multiple children the height of the tallest child

1 Answers1

Linked