DIVの既存コンテンツの左側にHTMLを追加

Question

私は現在、ページの右下にdivを持っています。ユーザーがスクロールしたり、サイズを変更したりすると、 divは、常に表示されているブラウザの右下に表示されます。私はすでにこれを行っている：

HTML：

<div id="chats-div"></div> 

CSS：

#chats-div 
{ 
    position:fixed; 
    bottom:0; 
    right:0; 
    z-index: 100; 
} 

これまでのところは良いです。さて、jQueryを使用して、このdivにHTMLを追加して、すでにdivにあるコンテンツの左側に表示したいので、これを（ボタンプレスから）試しています：

jQuery：

$('#chats-div').prepend("<div style='height:100px;width:50px;border:1px;border-style:solid;background-color:White;'>Div Contents</div>"); 

しかし、私はボタンを押すたびに、新しいHTMLは、上記以前DIV（の上）ではなく、その左側に追加されます。

私は基本的にgmail/facebookスタイルのチャットを再作成しようとしています。チャットウィンドウ全体を右下に維持しながら、既存のチャットウィンドウの左側に新しいチャットウィンドウを追加したいと思います。私は近くにいることを知っていて、Googleにそれを試してみるのに多大な時間を費やしています。

ありがとうございました！

Answer 1

あなただけ示すように、作成したdiv要素にfloat: left;を追加する必要がありますする必要があります

CSS：

.chat 
{ 
    height:100px; 
    width:50px; 
    border:1px; 
    border-style:solid; 
    background-color:White; 
    float:left;    /*Added to make them float alongside each other. */ 
} 

前に付加機能：

$('#chats-div').prepend("<div class='chat'>Div Contents</div>"); 

Working Demo

Answer 2

幅を#chats-divに設定しましたか？たぶん100%。また、float新しいdiv、またはdisplay:inline/display:inline-blockにしてください。

Answer 3

笑井戸...誰かがより良い答えを持っているが、それは価値がある。うまく行って

$('#chats-div').prepend("<div style='position:absolute;right:"+$("#chats-div").children().length*100+"%;height:100px;width:50px;border:1px;border-style:solid;background-color:White;'>Div Contents</div>"); 

http://jsfiddle.net/xZLf5/