0

This may seem like a fairly broad question, but here it is. I am displaying chat bubbles in the top left hand corner of the screen with a relative reference. So inherently when a new chat bubble is inserted, it is inserted below the previously. What I am wanting to do is make the chat bubble appear at the bottom left and then the bubble move up and the new message be in the bottom corner. So the older messages will be towards the top.

Should I do this with a table? Or what? I'm new to html5 but not older html. Where should I look for information regarding this? Any tips?

Travis Tubbs
  • 827
  • 1
  • 14
  • 32
  • Here is a way: http://stackoverflow.com/a/34330934/2827823 – Asons Feb 19 '16 at 19:01
  • Possible duplicate of [Scrollable div to stick to bottom, when outer div changes in size](http://stackoverflow.com/questions/34213227/scrollable-div-to-stick-to-bottom-when-outer-div-changes-in-size) – Asons Feb 19 '16 at 19:01

1 Answers1

1

Simple CSS can solve this. Just assign these rules to the container for your chat bubbles:

.bubbles_container {
    position: fixed;
    bottom: 0;
    left: 0;
}
J. Titus
  • 9,535
  • 1
  • 32
  • 45