Element changes position when I add text

I'm making a text browser RPG and I have the input form in the bottom of the page. When I add text to my game this form just moves down. How do I prevent that and make it fixed in a certain position so it doesn't move when I add something to the page?

That happens when I add text No text

html {
  border: 1px solid;
  height: 550px;
}
hr {
  display: block;
  border: 0;
  border-top: 1px solid #000;
}
.input {
  margin-top: 390px;
}

<hr>
    <body>
      <p>No text.</p>
	  <div class="input"><input type="text" name="input" size="179" padding-top="333px">
	  <input type="submit" value="Submit"></div>
    </body>

Solution

You could do something like the following, which defines the height of 'messages' instead of adding a margin to the input and adds a vertical scrollbar if necessary.

html {
  border: 1px solid;
  height: 550px;
}
hr {
  display: block;
  border: 0;
  border-top: 1px solid #000;
}
.messages {
  height: 390px;
  overflow-y: auto;
}

<hr>
    <body>
      <div class="messages"><p>No text.</p></div>
	  <div class="input"><input type="text" name="input" size="179" padding-top="333px">
	  <input type="submit" value="Submit"></div>
    </body>