title: CSS alignment issue for livechat box
body: <p>I want to show the livechat box in my every webpage in bottom. I did but the alignment is not working properly. I want to have it be similar to this live chat box example:(<a href="https://www.tawk.to/testimonials/" rel="nofollow noreferrer">https://www.tawk.to/testimonials/</a>). Please help me how do this.</p>
  
  <p>My code is: <a href="https://jsfiddle.net/fn77d0de/2/" rel="nofollow noreferrer">https://jsfiddle.net/fn77d0de/2/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// JavaScript Document
  
  var username = "";
  
  function send_message(bot_response) {
    var prevState = $("#container").html();
  
    console.log(prevState.length);
  
    if (prevState.length &gt; 8) {
      prevState = prevState + "&lt;br&gt;";
    }
  
    $("#container").html(prevState + "&lt;span class='current_message'&gt;" + "&lt;span class='chatBot'&gt;Chatbot: &lt;/span&gt;" + bot_response + "&lt;/span&gt;");
    $("#container").scrollTop($("#container").prop("scrollHeight"));
    $(".current_message").hide();
    $(".current_message").delay(500).fadeIn();
    $(".current_message").removeClass("current_message");
    //$("#container").html("&lt;span class='chatBot'&gt;Chatbot: &lt;/span&gt;" + message );
  }
  
  function get_userName() {
    //send_message("Hello, what is your name?");
  
    username = "${outParams.userName}";
    send_message("Nice to meet you " + username + ", how may can may I help you.");
  }
  
  function ai(newMessage) {
  
    var id = "1";
    var path = "http://localhost:8080/vfim/chatService.do";
  
    if (username.length &lt; 1) {
      username = newMessage;
      send_message("Nice to meet you " + username + ", how are you doing?");
    } else if (newMessage.indexOf("how are you") &gt;= 0) {
      send_message("Thanks, I am good!");
    } else if (newMessage.indexOf("time") &gt;= 0) {
      var date = new Date();
      var h = date.getHours();
      var m = date.getMinutes();
      send_message("Current time is: " + h + ":" + m);
    } else {
      $.post(path,
        {
          userMessage: newMessage
        },
        function(data) {
          //alert("inside ajax"+data);
          send_message(data);
        });
  
      /* $.get(path,function(data){
                      console.log("no match");
                      console.log(data);
                      send_message(data);
      }); */
    }
  }
  
  $(function() {
    $.ajax({
      url: "chatWindow.html",
      type: 'GET',
      success: function(data) {
  
        $('body').append(data);
        //$('#content').html($(data).find('#content').html());
        $('head').append('&lt;link rel="stylesheet" href="style.css" type="text/css" /&gt;');
        var logged_in = false;
        $(".pageTitleHeader").click(function() {
          logged_in = !logged_in;
          checkLogin();
        });
  
        function checkLogin() {
          if (logged_in)
            $(".contentBox").show();
          else
            $(".contentBox").hide();
        }
  
      }
    });
  
    get_userName();
    $("#textarea").keypress(function(event) {
      if (event.which == 13) {
        if ($("#enter").prop("checked")) {
          console.log("enter pressed");
          $("#send").click();
          event.preventDefault();
          //$("#textarea").val("");
        }
      }
    });
    $("#send").click(function() {
  
      var userName = "&lt;span class='uname'&gt;You: &lt;/span&gt;";
      var latestMessage = $("#textarea").val();
      $("#textarea").val("");
      var prevState = $("#container").html();
      //console.log(prevState.length);
      if (prevState.length &gt; 1) {
        prevState = prevState + "&lt;br&gt;";
      }
      $("#container").html(prevState + userName + latestMessage);
      $("#container").scrollTop($("#container").prop("scrollHeight"));
      ai(latestMessage);
    });
  });
  
  setTimeout(function() {
    $("#live-chat").css({
      "display": "block"
    });
  }, 900); // 30 seconds in MS
  
  // Store our panel into a variable.
  
  var $myPanel = $("#live-chat");
  // Get the height of the panel dynamically.
  var $myPanelHeight = parseInt($myPanel.height());
  // Immediately set the opacity to 0 - to hide it and set its bottom to minus its height.
  $myPanel.css({
    "opacity": 0,
    "bottom": "-" + $myPanelHeight + "px"
  });
  // Set a timeout for the panel to slide and fade in.
  setTimeout(function() {
    $myPanel.animate({
      // The CSS properties we want to animate (opacity and bottom position).
      opacity: 1,
      bottom: '0'
    }, 2000, function() {
      // Animation complete.
      // You can put other code here to do something after it has slid-in.
    });
  }, 30000); // 30 seconds in MS
  
  function getScripts(scripts, callback) {
    var progress = 0;
    scripts.forEach(function(script) {
      $.getScript(script, function() {
        if (++progress == scripts.length) callback();
      });
    });
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
    background-color: #f2f2f2;
    font-family: arial, sans-serif;
    font-weight: bold;
  }
  
  #header {
    width: 100%;
    height: 60px;
    background-color: #333;
    box-shadow: 0px 4px 2px #333;
  }
  
  #header&gt;h1 {
    width: 1024px;
    margin: 0px auto;
    color: white;
  }
  
  #container {
    width: 1024px;
    height: 400px;
    margin: 0px auto;
    margin-top: 20px;
    background-color: white;
    border: 1px solid #333;
    overFlow: scroll;
  }
  
  #controls {
    width: 1024px;
    margin: 0px auto;
  }
  
  #textarea {
    resize: none;
    width: 940px;
  }
  
  #send {
    font-size: 24px;
    position: absolute;
  }
  
  .uname {
    color: blue;
    font-weight: bold;
  }
  
  .chatBot {
    color: green;
    font-weight: bold;
  }
  
  #live-chat {
    position: absolute;
    bottom: 0px;
    right: 0px;
    /*   width: 200px;
      
          height: 100px;*/
    z-index: 5;
    background: #789;
    border-radius: 5px 5px 0 0;
    padding: 10px;
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;a href="page1.html"&gt;Page1&lt;/a&gt;
    &lt;a href="page2.html"&gt;Page2&lt;/a&gt;
    &lt;a href="page3.html"&gt;Page3&lt;/a&gt;
    &lt;div id="live-chat"&gt;
      &lt;table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"&gt;
        &lt;tr class="livepageTitle"&gt;
          &lt;td width="50%" class="maincurve" scope="col"&gt;
            &lt;h1 class="pageTitleHeader"&gt;Live Chat&lt;/h1&gt;
          &lt;/td&gt;
          &lt;td width="50%" class="maincurvecls" scope="col"&gt;
            &lt;table border="0" align="right" cellpadding="0" cellspacing="0" id="tblPageContent"&gt;
              &lt;tr&gt;
                &lt;!-- BODY STARTS --&gt;
                &lt;td height="31" align="right" valign="middle" nowrap class="innerPageTopLeftBGWithText"&gt;
                  &lt;dt:timeZone id="IST"&gt;IST&lt;/dt:timeZone&gt;
                  &lt;dt:format pattern="dd-MMM-yyyy [hh:mm a z]" timeZone="IST"&gt;
                    &lt;dt:currentTime /&gt;
                  &lt;/dt:format&gt;
                  &amp;nbsp;&amp;nbsp;&lt;/td&gt;
  
                &lt;!--                                                                        &lt;td width="14" height="31" align="right" valign="middle"&gt;&lt;a href="#" title="Help" onClick="helpWindow('corporate/admin/admin_ma_accrts_add.htm')"&gt;&lt;img src="/sbijava/images/help_icon.jpg" alt="Help" width="14" height="13" border="0" align="middle"&gt;&lt;/a&gt;&lt;/td&gt; --&gt;
  
                &lt;!--                                                                        &lt;td width="29" height="31" align="right" valign="middle" class="helpAndPrintLinks" onClick="helpWindow('corporate/admin/admin_ma_accrts_add.htm')"&gt;&lt;a href="#" title="Help"&gt;Help&lt;/a&gt;&amp;nbsp;&amp;nbsp;&lt;/td&gt; --&gt;
              &lt;/tr&gt;
              &lt;!-- BODY ENDS --&gt;
              &lt;!-- FOOTER STARTS --&gt;
              &lt;!-- FOOTER ENDS --&gt;
            &lt;/table&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;!-- Tab starts --&gt;
        &lt;tr class="contentBox"&gt;
          &lt;td colspan="2" align="left" valign="top" scope="row" class="pageContentBG"&gt;
            &lt;table width="98%" border="0" align="center" cellpadding="0" cellspacing="0" class="tabtblbrdr"&gt;
              &lt;!-- &lt;tr&gt;
                   &lt;td colspan="6" class="innerPageSectionHeading"&gt;Select the Date Range &lt;/td&gt;
          &lt;/tr&gt; --&gt;
              &lt;tr&gt;
                &lt;td align="left" width="30%"&gt;
                  &lt;!--         &lt;div id="header"&gt;
                         &lt;h1&gt;jQuery Chatbot v. 1.0&lt;/h1&gt;
                         &lt;/div&gt; --&gt;
                  &lt;div id="container"&gt; &lt;/div&gt;
                  &lt;div id="controls"&gt;
                    &lt;textarea id="textarea" placeholder="Enter your message here..."&gt;&lt;/textarea&gt;
                    &lt;button id="send"&gt;Send&lt;/button&gt;
                    &lt;br&gt;
                    &lt;input checked type="checkbox" id="enter"&gt;
                    &lt;label&gt;Send on enter&lt;/label&gt;
                  &lt;/div&gt;
                &lt;/td&gt;
              &lt;/tr&gt;
            &lt;/table&gt;
            &lt;br&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>