How to fix textbox position on the screen

Question

I am implementing a chat system in my web app and I am showing the message list (where new messages will be appended below) and a message box where the user can type in their messages.

The current issue I am facing is that the message box gets pushed down the screen as I add new messages to the list (appended to bottom of last row).

How can I fix the position of the message box on the screen so that it doesn't get pushed down?

To clarify, the message box will always be below the last message in the list. This means that I would need the page to auto scroll so that the message box will always stay in position ie in the center of the screen

Answer 1

As you've not shared any markup, I've made one demo of mine...So inorder to stop your input box pushed down, you need to use overflow-y: scroll; on your message box and give it a fixed height to it like this : My Fiddle

HTML

<div class="container">
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
</div>
<input type="text" />​

CSS

.container {
height: 200px; 
width: 200px; 
background-color: #ff0000; 
overflow-y: scroll;
}​

Answer 2

Can't quite understand the exact question.

If you are looking to fix the message box to certain position in the window regardless of other controls' positions, you can do something like this:

#msgboxContainer
{
  position:absolute;
  left:10px; 
  bottom:20;
}