title: CSS: aligning two divs to the bottom of the page on the right side with position: absolute
body: <p>I am trying to make a simple chatbox with a header in css, I am trying to align the chat to the bottom of the page, and to the right of the page. I have tried using </p>
  
  <pre><code>float: right;
  bottom: 0;
  position: absolute;
  </code></pre>
  
  <p>It aligns it to the bottom of the page but not to the right. Here is my full code<br></p>
  
  <p>CSS</p>
  
  <pre><code>#chatbox {
      height: 360px;
      width: 320px;
      border-left: 1px solid #000;
      border-right: 1px solid #000;
      border-bottom: 1px solid #000;
      float: right;
      bottom: 0;
      position: absolute;
  }
  .chatheader {
      font-family:'PT Sans';
      background: #999;
      width: 322px;
      height: 36px;
      color: #fff;
      text-align: center;
      padding-top: 15px;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="chatheader"&gt;chatboxheader&lt;/div&gt;
  &lt;div id="chatbox"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is a demo of the code <a href="http://jsfiddle.net/xGh0stSn1p3r/78S5g/" rel="nofollow">DEMO</a>
  This is just a very simple script because I am trying to get it aligned first, later On I will make it look better. Thanks in advance to anyone who can help me!</p>