title: css in a chatbox
body: <p>I have a chat program where my target is, when someone type and send a text, i want the text to be display from the bottom. Like any other chating frame.
  To do this, i have wrote the following html/css structure.
  here the &quot;li&quot; tags are creating dynamically when someone send a text.</p>
  <p>The problem:</p>
  <p>The problem is if i remove the &quot;height:100% &quot; from the &quot;.chatbox ul&quot;, the text in the chatbox starts from the bottom. But in that case i dont see any scroll bar. But I need to see a scroll bar.
  And, if I keep the &quot;height:100% &quot; in the &quot;.chatbox ul&quot;, I see a scroll bar but the text in the chatbox starts from the top.</p>
  <p>My target is to have a scroll bar and the text should also start from the bottom.
  How would I acheive this..?? any help guys??</p>
  <pre><code>&lt;div class=&quot;chatBox&quot;&gt;
  &lt;ul id=&quot;messages&quot; class=&quot;chatText&quot;&gt;
      &lt;li&gt;
      &lt;div class=&quot;chatterName&quot;&gt;maverick &lt;/div&gt;
      &lt;div class=&quot;chatterMessage&quot;&gt; hi&lt;/div&gt;
      &lt;div class=&quot;clear&quot;&gt;&lt;/div&gt;
      &lt;/li&gt;
      
      &lt;li&gt;
      &lt;div class=&quot;chatterName&quot;&gt;johny&lt;/div&gt;
      &lt;div class=&quot;chatterMessage&quot;&gt; hello&lt;/div&gt;
      &lt;div class=&quot;clear&quot;&gt;&lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  <pre><code>.chatBox
  {
  background-image: url('../images/DefaultitemBg.gif');
  font-family: Verdana;
  font-size: 14px;
  color: #333333;
  border: 1px double #FFFFFF;
  padding: 5px;
  margin: 10px;
  width:76%;
  height:600px;
  position:relative;
  border: 1px solid #E9E9E9;
  overflow:auto;
  float:left;
  
  }
  .chatBox ul
  {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  position:absolute;
  overflow:auto;
  bottom:0;
  height:100%;
  }
  .chatBox ul li
  {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #F2F2F2;
  margin-bottom: 0px;
  }
  .chatterName
  {
  width: 120px;
  background-color: #EEEEEE;
  color: #333333;
  float: left;
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: #CCCCCC;
  height: 30px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #E6E6E6;
  }
  .chatterMessage
  {
  width: 91%;
  padding-left:4px;
  color: #333333;
  float:left;
  min-height:30px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #EFEFEF;
  }
  .chatText
  {
  bottom: 0;
  left: 0;
  border-top-style: 0;
  border-right-style: 0;
  border-bottom-style: 1;
  border-left-style: 0;
  border-bottom-width: 1px;
  border-bottom-color: #E6E6E6;
  
  width:100%;
  </code></pre>
  <p>}</p>
  <p>EDIT:</p>
  <p><a href="http://screencast.com/t/uXT0rfhue6U7" rel="nofollow noreferrer">See it live here</a></p>
  <p>If you see carefully, you will notice when i am entering text in the chatbox, from the top, previous texts are disappearing.
  What I want is a scroll bar, so that users can see previous messages.</p>