Dynamically changing height of div element based on content <p>I'm working on a Facebook-like toolbar for my website.</p> <p>There's a part of the toolbar where a user can click to see which favorite members of theirs are online.</p> <p>I'm trying to figure out how to get the div element that pops up to grow based on the content that the AJAX call puts in there.</p> <p>For example, when the user clicks "Favorites Online (4)", I show the pop up div element with a fixed height and "Loading...". Once the content loads, I'd like to size the height of the div element based on what content was returned.</p> <p>I can do it by calculating the height of each element * the number of elements but that's not very elegant at all.</p> <p>Is there a way to do this with JavaScript or CSS? (note: using JQuery as well).</p> <p>Thanks.</p> <p>JavaScript:</p> <pre><code> function favoritesOnlineClick() { $('#favoritesOnlinePopUp').toggle(); $('#onlineStatusPopUp').hide(); if ($('#favoritesOnlinePopUp').css('display') == 'block') { loadFavoritesOnlineListing(); } } </code></pre> <p>CSS and HTML:</p> <pre><code> #toolbar { background:url('/_assets/img/toolbar.gif') repeat-x; height:25px; position:fixed; bottom:0px; width:100%; left:0px; z-index:100; font-size:0.8em; } #toolbar #popUpTitleBar { background:#606060; height:18px; border-bottom:1px solid #000000; } #toolbar #popUpTitle { float:left; padding-left:4px; } #toolbar #popUpAction { float:right; padding-right:4px; } #toolbar #popUpAction a { color:#f0f0f0; font-weight:bold; text-decoration:none; } #toolbar #popUpLoading { padding-top:6px; } #toolbar #favoritesOnline { float:left; height:21px; width:160px; padding-top:4px; border-right:1px solid #606060; text-align:center; } #toolbar #favoritesOnline .favoritesOnlineIcon { padding-right:5px; } #toolbar #favoritesOnlinePopUp { display:block; border:1px solid #000000; width:191px; background:#2b2b2b; float:left; position:absolute; left:-1px; top:-501px; /*auto;*/ height:500px;/*auto;*/ overflow:auto; } #toolbar #favoritesOnlineListing { font-size:12px; } &lt;div id="toolbar"&gt; &lt;div id="favoritesOnline" style=" &lt;?php if ($onlinestatus == -1) { echo "display:none;"; } ?&gt; "&gt; &lt;img class="favoritesOnlineIcon" src="/_assets/img/icons/favorite-small.gif" /&gt;&lt;a href="javascript:favoritesOnlineClick();"&gt;Favorites Online (&lt;span id="favoritesOnlineCount"&gt;&lt;?php echo $favonlinecount; ?&gt;&lt;/span&gt;)&lt;/a&gt; &lt;div id="favoritesOnlinePopUp"&gt; &lt;div id="popUpTitleBar"&gt; &lt;div id="popUpTitle"&gt;Favorites Online&lt;/div&gt; &lt;div id="popUpAction"&gt;&lt;a href="javascript:closeFavoritesOnline();"&gt;x&lt;/a&gt;&lt;/div&gt; &lt;/div&gt; &lt;div id="favoritesOnlineListing"&gt; &lt;!-- Favorites online content goes here --&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre>