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.

Answer 3

You can do this using jQuery like;

var first = $('div > div:first-child');
first.appendTo(first.parent());

To deal with several elements, you can do this:

$('div > div').each(function() {
    $(this).prependTo(this.parentNode);
});

Here is a working Live Demo.

Answer 4

You should use a combination of display:table-cell and vertical-align:bottom. I use Sotiris's fiddle and fixed its CSS.

The HTML is

<div  style="display:table; height:200px;">
    <div style="display:table-row">
            <div id="chat" style="width:400px; border:1px solid black;display:table-cell; vertical-align:bottom">
            </div>
    </div>

</div>
<input type="text"><input type="button" value="post">
​

And this is the JavaScript code

$(':button').click(function() {
   var message = $('input[type=text]').val();
    $('#chat').append( $('<div/>').text(message) );
});
​

Please let me know if there is a problem.

This is the fiddle

I kept searching for a better solution because table layout is always suspicious to me, but I found css-tricks article about it and they do the same as I do.. so I guess this solution is the right one.

ADDING - keep scroll to bottom code

Since new messages are coming at the bottom, we need to keep scroll to bottom. I updated the fiddle link