Dynamically positioning pop-up "windows" (div elements)

Question

I have a fixed toolbar at the bottom of my page where users are going to be able to change their online status and load a listing of their favorites among other things.

In the toolbar, I have parent div elements that when clicked, pop up child div elements that need to be positioned directly above the parent element.

For the online status part, I think I'm doing it right since the height of the pop-up for the online status is always the same height.

CSS:

#toolbar
{
    background:url('/_assets/img/toolbar.gif') repeat-x;
    height:25px;
    position:fixed;
    bottom:0px;
    left:1%;
    right:1%;
    border-left:1px solid #000000;
    border-right:1px solid #000000;
    z-index:100;
    font-size:0.8em;
}   
#toolbar #onlineStatus
{
    float:left;
    width:30px;
    padding-top:5px;
    height:21px;
    text-align:center;
    border-right:1px solid #606060;
}
#toolbar #onlineStatusPopUp
{
    display:none;
    border:1px solid #000000;
    height:50px;
    width:211px;
    background:#2b2b2b;
    float:left;
    position:absolute;
    left:-1px;
    top:-51px;
}

HTML:

<div id="toolbar">
   <div id="onlineStatus">
       <a href="javascript:onlineStatusClick();"><img id="onlineStatusIcon" src="/_assets/img/icons/<?php if ($onlinestatus == 0) { echo "online.gif"; } else { echo "hidden.gif"; } ?>" /></a>
       <div id="onlineStatusPopUp">
           <div id="popUpTitleBar">
               <div id="popUpTitle">Online Status</div>
               <div id="popUpAction"><a href="javascript:closeOnlineStatus();">x</a></div>
           </div>
           <div id="onlineStatusMessage">
               <?php if ($onlinestatus == 0) { echo "You're online, <a href=\"javascript:changeOnlineStatus();\">go hide</a>"; } else { echo "You're hidden, <a href=\"javascript:changeOnlineStatus();\">go online</a>"; } ?>
           </div>
       </div>
   </div>
</div>

Is that the correct way of positioning the pop-up element or should I be doing it differently (i.e., position: relative instead of absolute with some tweaks)?

Here's a screen shot of how it looks:

http://img118.imageshack.us/img118/346/onlinestatus.jpg

If that's correct, it brings me to my next problem which is a pop up div element whose size changes based on content returned from an AJAX call. Right now I'm positioning the element based on the number of items returned via JavaScript and JQuery and it's really ugly.

Is there a better way to do it?

First, here's a screen shot of the dynamically filled div element:

http://img509.imageshack.us/img509/4311/favoritesonline.jpg

CSS:

#toolbar #favoritesOnline
{
    float:left;
    height:21px;
    width:180px;
    padding-top:4px;
    border-right:1px solid #606060;
    text-align:center;
}
#toolbar #favoritesOnline .favoritesOnlineIcon
{
    padding-right:5px;
}
#toolbar #favoritesOnlinePopUp
{
    display:none;
    border:1px solid #000000;
    width:211px;
    background:#2b2b2b;
    float:left;
    position:absolute;
    left:-1px;
}
#toolbar #favoritesOnlineListing
{
    overflow:auto;
}

HTML (note: it's wrapped in the toolbar div as well):

   <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"></div>
   </div>

And here's the ugly JavaScript I'm using to position it above the parent element based on the number of items in the list (array[0] is the number of elements).

$("#favoritesOnlinePopUp").css('top', ((parseInt(array[0]) * 39) - 5 + 1) * -1);

Answer 1

If your toolbar has a fixed height, you could probably position the popup absolutely from the bottom, with the toolbar-element as the relative container.

and css:

#favoritesOnline {
    position: relative;
}

#favoritesOnlinePopup {
    position: absolute;
    width: 211px;
    bottom: 21px;
}

This should start at the top of #favoritesOnline and grow upwards as the content fills the div.