Is it possible to position a div on top of another starting from the bottom using CSS?

Question

I have a chat window made using HTML, CSS & JS. I want to position the message from bottom to top. Example: first message div at the bottom, 2nd message div on top of first an so on. Is it possible?

Answer 1

I can't imagine a pure CSS solution. But Using jQuery, if you already have this library for your project, you could write something this:

$(':button').click(function() {
   var message = $('input[type=text]').val();
    $('#chat').prepend('<div class="line">'+message);
});

Demo: http://jsfiddle.net/Vbd67/1/

**I changed the append to prepend according to the comment

Answer 2

---

I know that this is not an answer to your question, rather this is a better option that you should consider implementing in the chat window.

Newest comment should be at the bottom, that is how most basic chat windows work.

Next thing, you can do this all using css: because such a design requires either use of table rows or list elements Obviously you have to use javascript for using ajax, so that you can asynchronously fetch user records like messages and profile pic etc

---

CSS:

<style type="text/css">
table#chat_window {
}
tr#message_row {
}
td#profile_pic {
}
td#message {
}
</style>

HTML STRUCTURE:

<table id="chat_window">
  <tr id="message_row">
    <td id="profile_pic"></td>
    <td id="message"></td>
  </tr>
</table>

OR USING LISTS:

<ul id="chat_window">
  <li id="message_row">
    <div id="profile_pic"></div>
    <div id="message"></div>
  </li>
</ul>

---

Now you have to just using javascript:ajax to fetch values and add a child:

1. If you are using table based chat-window, then you have to fetch the table id using javascript and add row element <tr> per value/message that you fetch.
2. If you are using list based chat-window, then you have to fetch the list id using javascript and add list element <li> per value/message that you fetch.

   ---

I am sorry if there are any typos I have less time.