Vertically Align content in div tag

I needed to align content bottom-up for one web-based IM interface, searched around but could not find a perfect solution after a while, so here is how I solved the problem:

<div style="height:400px;width:100%">

 <table style="border:0;height:400px;width:100%;overflow:scroll">

            <tr>

            <td  id="TableInner" style="vertical-align:bottom;">

            </td>

            </tr>

          </table>

</div>

In above code, key is to put a table inside a div. Vertical-Align does not work on div tag so no matter what style you apply it will never work. by default it will align top. by putting same Size of table inside div we create another container for our content. Now we can apply vertical-align:bottom to TD tag of our table. Whatever content we need to put now we put it inside that TD tag. problem solved.   The outer div around table provides the scrollbars to our content if it overflows.

In addition if you need to set scroll position of Div to bottom then following Javascript will do that:

var objScr = document.getElementById(‘myDiv’); 

objScr.scrollTop = objScr.scrollHeight;

 

Hope this helps.