setting the height of the parent according to the highest child element, jquery

I have a layout, which basically contains a

<div class="line" id="#">
<div class="summary">
Some Text
</div>
<div class="summary">
Some
</div开发者_Python百科>
<div class="summary">
Some long text
</div>
</div>

I want, using jQuery, to expand the height of the <div class="line"> according to the highest child element, I tried fiddling with:

$(".line").attr("id", function()
while ($(this).next().length > 0)
{
ac = $(this).children(".summary").outerHeight();
a = $(this).children(".summary").next().outerHeight();

if (a > ac)
{
a = ac;
}
}
$(this).css("height", a + "px");
});

and no success, what selectors I need to use, and how would I go about achieving this?

if indeed the summary divs are columns in a 3 column layout by applying a float:left on them, you could wrap the container nicely around all three by just adding an extra div and style it with clear:both

So your html would look like this:

<div class="line" id="#">
  <div class="summary">
    Some Text
  </div>
  <div class="summary">
    Some
  </div>
  <div class="summary">
    Some long text
  </div>
  <div style="clear:both"></div>
</div>