CSS: aligning two divs to the bottom of the page on the right side with position: absolute

Question

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

float: right;
bottom: 0;
position: absolute;

It aligns it to the bottom of the page but not to the right. Here is my full code

CSS

#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;
}

HTML

<div class="chatheader">chatboxheader</div>
<div id="chatbox">

</div>

Here is a demo of the code DEMO 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!

Answer 1

Since you want both chatheader and chatbox on the bottom right of the page. I have modified code little bit. I have wrapped both of them in a div.

HTML:

<div id="chat-container">
    <div class="chatheader">chatboxheader</div>
    <div id="chatbox"></div>
</div>

CSS:

#chat-container {
    right :0;
    bottom: 0;
    position: absolute;
}

right:0 will keep the element on extreme right.

Updated fiddle here.

Answer 2

DEMO

HTML

#chatbox {
    height: 360px;
    width: 320px;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
}
.chatheader {
    font-family:'PT Sans';
    background: #999;
    width: 322px;
    height: 36px;
    color: #fff;
    text-align: center;
    padding-top: 15px;
    float:right;
}
.chatMain {
    position:absolute;
    bottom:0;
    right:0;
}