JQuery固定聊天栏？

Question

大家好！

我目前正在进入一个新项目，更具体地说是一个固定的聊天栏。此聊天栏扩展到文档的100％宽度，当然也固定在页面底部。

所以这就是我的问题。我的目标特别是使用jquery来确定何时不能放置标签，并添加一种向栏添加标签的替代方法（例如，可能是标签，或者是循环浏览每个标签的简单滚动按钮）。

在这个过程中，我的问题是，我不确定如何“攻击”这个计划。现在，聊天栏由父div（ghChatBar）组成，并且它的子项向左浮动，其中的标签位于其自己的div中（为了便于访问，将其分开，目前持有div id“ghChatTabs”）。

所以要打破它，我只是想找到一种方法来确定标签何时符合分区的结束，同时不影响朋友在线按钮，但仍然允许用户打开更多标签，只是有一种将它们添加到栏中的方法，而不是走出酒吧，有点像facebook的方法是如何工作的。打开足够的标签后，它会添加一个dropmenu，其中包含无法放在屏幕上的标签。如果它更容易，右边没有其他div，只有标签。我几乎觉得更聪明的做法是使用无序列表方法重新编码吧，对此也有想法？

我的聊天栏的布局示例：ImageShack.Us Image

我提前感谢您的任何答案，非常感谢您抽出宝贵时间提供帮助。

谢谢！

修改

<div id="ghChatBar">
    <div class="friends-online">
        [11] Friends Online
        <div class="friends-list">
            <!-- Friends list popup div goes here -->
        </div>
    </div>
    <!-- Chat Window Container -->
    <div id="ghChatTabs">
       <div class="ghChatWindow" data-userid="userid" id="user-chat-{id_goes_here}">
           <!-- Inside of Chat Window -->
       </div>
    </div>
    <!-- End Chat Container -->
</div>

显然，父div“ghChatBar”保持固定位置，100％宽度等。上面只是这个栏内置的html的简单细分。该栏内的所有内容都只是向左浮动。一切都有一定的宽度。