CODEWITHSUNDEEP
csscss-float
vishesh
vishesh

Reputation: 2045

position div to bottom right

I am creating facebook like chat in my website.So whenever user clicks to chat to someone the chat window should open in the bottom right corner.The next window should be left to the other opened chat windows.Also the chat windows should not occupy extra height on page.They should just be placed at a higher z-index to overlap the page content behind them.I am not that good in css,please help.following is the code which I am using,but it's not working properly

.chat{
    z-index:50;
    width: 300px;
    height:300px;
    margin-left:10px;
    float:right;
    border:1px solid blue;
}

I am getting this ,it's adding scroll bar to page and not going to very right.

enter image description here

Upvotes: 0

Views: 2323

Answers (3)

Nick Andriopoulos
Nick Andriopoulos

Reputation: 10653

you need to have a parent element ( a div ) with :

.parent { position: fixed; bottom: 0; left: 0; right:0; width: 100%; }

you need fixed position so that the bar remains at the bottom of the browser, not of your page. that acts like a container for your chat divs, which should have 

.chat { float: right; position: relative; }

so they can act as containers to their actual chat

here's a fiddle with a couple of chat windows :

http://jsfiddle.net/SXZKe/1/

Edit: Added the fiddle

Upvotes: 3

Retired_User
Retired_User

Reputation: 1595

Use bottom css property for that:

http://www.w3schools.com/cssref/pr_pos_bottom.asp

Upvotes: 0

Brad M
Brad M

Reputation: 7898

Try removing the float: right, adding position: fixed, right : 0%, and bottom: 0%;

Upvotes: 0

Related Questions