Element changes position when I add text

Question

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>

remove this in html `height: 550px;` – bhv Jul 29 '17 at 11:49 — bhv, Jul 29 '17 at 11:49

score 1 · Answer 1 · answered Jul 29 '17 at 11:53

1

Just remove padding-top,
Try with
.input:{ position:absolute; bottom:0; }

I think it will be ready. Or just try with position:fixed.

answered Jul 29 '17 at 11:53

saifudeen ni

145
9

DMrFrost · Answer 2 · 2017-07-29T11:55:52.073

You could give it a fixed position if you are not planning to scroll at all. This will keep your element located in the same spot in your viewport no matter if you scroll or not.

position: fixed;

You can also use position absolute in order to make your elements position not react to any other elements on your page.

position: absolute;

You will then have to position your element manually using top: #px to push your element down to its desired location.

score 0 · Accepted Answer · answered Jul 29 '17 at 11:56

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>

That works perfectly! I just had to change some values. Thank you! — Victor Key, Jul 29 '17 at 12:05

Element changes position when I add text

3 Answers3