title: Use jquery to make chat boxes float like facebook
body: <p>I'm trying a make a chat script like a facebook, but my problem is when i delete a chat box , there place left empty, what i want is for example i have 3 chat boxes , so when i delete the first one i want the second one replace the first one and the third one replace the second one and so on. 
  this is how i create chat boxes:</p>
  
  <pre><code>function createChatBox(chatboxtitle,minimizeChatBox) {
      if ($("#chatbox_"+chatboxtitle).length &gt; 0) {
          if ($("#chatbox_"+chatboxtitle).css('display') == 'none') {
              $("#chatbox_"+chatboxtitle).css('display','block');
              restructureChatBoxes();
          }
          $("#chatbox_"+chatboxtitle+" .chatboxtextarea").focus();
          return;
      }
  
      $(" &lt;div /&gt;" ).attr("id","chatbox_"+chatboxtitle)
      .addClass("chatbox")
      .html('&lt;div class="chatboxhead" onclick="javascript:toggleChatBoxGrowth(\''+chatboxtitle+'\')"&gt;&lt;div class="chatboxtitle"&gt;'+chatboxtitle+'&lt;/div&gt;&lt;div class="chatboxoptions"&gt; &lt;a href="javascript:void(0)" onclick="javascript:closeChatBox(\''+chatboxtitle+'\')"&gt;X&lt;/a&gt;&lt;/div&gt;&lt;br clear="all"/&gt;&lt;/div&gt;&lt;div class="chatboxcontent"&gt;&lt;/div&gt;&lt;div class="chatboxinput"&gt;&lt;textarea class="chatboxtextarea" onkeydown="javascript:return checkChatBoxInputKey(event,this,\''+chatboxtitle+'\');"&gt;&lt;/textarea&gt;&lt;/div&gt;')
      .appendTo($( "#bottom" ));                        // where to add chat boxes
  
      $("#chatbox_"+chatboxtitle).css('bottom', '0px'); // chat box position
  
      chatBoxeslength = 0;
  
      for (x in chatBoxes) {
          if ($("#chatbox_"+chatBoxes[x]).css('display') != 'none') {
              chatBoxeslength++;
          }
      }
  
      if (chatBoxeslength == 0) {
          $("#chatbox_"+chatboxtitle).css('left', '0px'); // to display chat box left
      } else {
          width = (chatBoxeslength)*(218.3+7)+0;
          $("#chatbox_"+chatboxtitle).css('left', width+'px'); //boxes float to the left
      }
  
      chatBoxes.push(chatboxtitle);
  
      if (minimizeChatBox == 1) {
          minimizedChatBoxes = new Array();
  
          if ($.cookie('chatbox_minimized')) {
              minimizedChatBoxes = $.cookie('chatbox_minimized').split(/\|/);
          }
          minimize = 0;
          for (j=0;j&lt;minimizedChatBoxes.length;j++) {
              if (minimizedChatBoxes[j] == chatboxtitle) {
                  minimize = 1;
              }
          }
  
          if (minimize == 1) {
              $('#chatbox_'+chatboxtitle+' .chatboxcontent').css('display','none');
              $('#chatbox_'+chatboxtitle+' .chatboxinput').css('display','none');
          }
      }
  
      chatboxFocus[chatboxtitle] = false;
  
      $("#chatbox_"+chatboxtitle+" .chatboxtextarea").blur(function(){
          chatboxFocus[chatboxtitle] = false;
          $("#chatbox_"+chatboxtitle+" .chatboxtextarea").removeClass('chatboxtextareaselected');
  
      }).focus(function(){
          chatboxFocus[chatboxtitle] = true;
          newMessages[chatboxtitle] = false;
          $('#chatbox_'+chatboxtitle+' .chatboxhead').removeClass('chatboxblink');
          $("#chatbox_"+chatboxtitle+" .chatboxtextarea").addClass('chatboxtextareaselected');
      });
  
      $("#chatbox_"+chatboxtitle).click(function() {
          if ($('#chatbox_'+chatboxtitle+' .chatboxcontent').css('display') != 'none') {
              $("#chatbox_"+chatboxtitle+" .chatboxtextarea").focus();
          }
      });
  
      $("#chatbox_"+chatboxtitle).show();}
  </code></pre>
  
  <p>and this is the function that i want to manipulate to make the trick work :</p>
  
  <pre><code>function closeChatBox(chatboxtitle) {
      $('#chatbox_'+chatboxtitle).css('display','none');
      restructureChatBoxes();
      $.post("chat.php?action=closechat", { chatbox: chatboxtitle} , function(data){  
      });}  
  </code></pre>