title: put scroll bar outside div with auto overflow
body: <p>I have a small div with <code>overflow:auto;</code> but when the the scroll bar appears it covers up a great deal of the div. This can be avoided by using <code>overflow:scroll;</code>, but then you get the unsightly faded scroll bar when there is no overflow. Is there a way of putting the scroll bar outside of the div without using <code>overflow:scroll;</code>? Thanks.</p>
  
  <p>here is a demonstration  <a href="http://jsfiddle.net/Wr6Nm/2/">jsfiddle</a> </p>
  
  <pre><code>.alphabet{ display:inline-block;
             overflow-y:auto; 
             overflow-x:hidden;
             border:1px solid;
             height:50;
           }
  
  &lt;div class = "alphabet"&gt;abcdefgh&lt;br&gt;
                          ijklmnop&lt;br&gt;
                          qrstuvwx
  &lt;/div&gt;
  </code></pre>