I am trying to work out a resize function to increase the height of a div container (in each case here, "div.cell") if the screen is scrunched so much that the contents spill out. Each div.cell has a bunch of different p's. Here are just 2.\[code\] <div class="cell panel"> <img src="http://stackoverflow.com/questions/14595484/stills/press/press-logo-c2e2.png" class="general"><p class="one">Panelist - Chicago Comic & Entertainment Expo</p> <p class="two">[Panel Name Here]</p> <p class="three"><b>Panel Date/Location:</b> [Time]PM on April 26-28, 2013 at C2E2 (Chicago, Illinois)</p> <p class="three"><b>Panelists:</b> [Panelists]</p> <p class="three"><b>Panel Blurb:</b> "[Blurb]"</p> </div> <div class="cell panel"> <img src="http://stackoverflow.com/questions/14595484/stills/press/press-logo-wondercon-anaheim.png" class="general"><p class="one">Panelist - WonderCon</p> <p class="two">[Panel Name Here]</p> <p class="three"><b>Panel Date/Location:</b> [Time]PM on March 29-31, 2013 at WonderCon (Anaheim, California)</p> <p class="three"><b>Panelists:</b> [Panelists]</p> <p class="three"><b>Panel Blurb:</b> "[Blurb]"</p> </div>\[/code\]In super rudimentary, and very wrong, jquery, I was hoping to nest to do this, such as:\[code\]var pheight = 0;var divheight = 0;var biggest = 0;$("div.cell").each(function (){ divheight=$(this).height(); pheight = 0; $("p").each(function (){ pheight += $(this).height(); }); biggest = divheight; if (pheight > biggest) { biggest = pheight }; $(this).css("height",biggest);})\[/code\]This doesn't work 
Anyone know how I can change each div.cell to be the cumulative height of its p's (plus a buffer)
Anyone know how I can change each div.cell to be the cumulative height of its p's (plus a buffer)