title: Bottom text cut off in scroll div, can't fix it with margin
body: <p>When I add a div with overflow auto (so I get a scrollbar), the text is cut at the bottom of the banner (and you have to scroll to read the rest).</p>
  
  <p>But, now the thing; I can't get a free space between the <code>&lt;p&gt;</code> tag and the bottom of the div. I have tried margin, padding and borders.. But I can't get it right. When I use margin, the top, left and right is good. But at the bottom it isn't working, only when you scroll to the bottom you can see the bottom-margin.</p>
  
  <p>Can someone tell me how to get it right? I've made <a href="http://jsfiddle.net/62Mvn/1/" rel="nofollow">a jsFiddle</a> so you can see what is wrong.</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#t2_b2 {
      background: #000000;
      width: 500px;
      height: 100px;
      overflow-y:auto;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="t2_b2"&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quam neque, luctus et mattis at, ullamcorper quis orci. Nulla facilisi. Aliquam et quam sed augue euismod egestas. Pellentesque id varius ante. Cras eu dolor eros. In at ligula vel felis euismod sodales et eu metus. Maecenas molestie ultricies ipsum at eleifend. Quisque at odio massa. Aenean faucibus, urna non pulvinar gravida, nulla ligula laoreet tellus, a euismod ligula mi scelerisque lectus. Proin ultrices magna a lectus convallis ultrices. Nullam convallis sollicitudin lorem consequat sollicitudin. Fusce quis accumsan urna.&lt;/p&gt;&lt;/div&gt;
  </code></pre>