Sandip's Programming Zen

An attempt to share tech/coding experiences

Vertically Align content in div tag

leave a comment »

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.

Advertisements

Written by Sandip

February 13, 2009 at 1:55 am

Posted in Troubleshooting

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: