Dynamically changing height of div element based on content

Question

I'm working on a Facebook-like toolbar for my website.

There's a part of the toolbar where a user can click to see which favorite members of theirs are online.

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.

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.

I can do it by calculating the height of each element * the number of elements but that's not very elegant at all.

Is there a way to do this with JavaScript or CSS? (note: using JQuery as well).

Thanks.

JavaScript:

    function favoritesOnlineClick()
{
 $('#favoritesOnlinePopUp').toggle();
 $('#onlineStatusPopUp').hide(); 
 if ($('#favoritesOnlinePopUp').css('display') == 'block') { loadFavoritesOnlineListing(); } 
}

CSS and HTML:

    #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;
}
<div id="toolbar">
    <div id="favoritesOnline" style=" <?php if ($onlinestatus == -1) { echo "display:none;"; } ?> ">
       <img class="favoritesOnlineIcon" src="/_assets/img/icons/favorite-small.gif" /><a href="javascript:favoritesOnlineClick();">Favorites Online (<span id="favoritesOnlineCount"><?php echo $favonlinecount; ?></span>)</a>
        <div id="favoritesOnlinePopUp">
            <div id="popUpTitleBar">
                <div id="popUpTitle">Favorites Online</div>
                <div id="popUpAction"><a href="javascript:closeFavoritesOnline();">x</a></div>
            </div>     
            <div id="favoritesOnlineListing">
             <!-- Favorites online content goes here -->
            </div>
        </div>
    </div>
</div>

Answer 1

Make it a float element and don't use a clearing element after it.

Answer 2

Maybe you could remove the height property (make sure it's not set in the CSS) and let the DIV expand in height by itself.