title: CSS speech bubble auto size?
body: <pre><code>/* Normal Bubble */
  .bubble {
      width: auto;
      font-size: 0.75em;
      margin-bottom: 24px;
  }
  
  .bubble blockquote {
      margin: 0px;
      padding: 0px;
      border: 1px solid #c9c2c1;
      background-color: #000;
  }
  
  .bubble blockquote p {
      margin: 10px;
      padding: 0px;
          font-size: 21px;
  }
  
  .bubble cite {
      position: relative;
      margin: 0px;
      padding: 7px 0px 0px 15px;
      top: 6px;
      background: transparent url(b/tip.gif) no-repeat 20px 0;
      font-style: normal;
  }
  </code></pre>
  
  <p>I have this for my comments.. that looks like "speech bubbles" .</p>
  
  <p>I dont want it big from the beginning, i want to have it custom after the text.. I mean if you wrote "hello" then it should be around it with maybe 1-2px margin from the bubble, so if you wrote "Hello my name is and i like to cook!" then it should be bigger..its like this right now:</p>
  
  <pre><code>    &lt;div class="bubble"&gt;
              &lt;blockquote&gt;
  &lt;p&gt;the comment text is here&lt;/p&gt;
          &lt;/blockquote&gt;
          &lt;cite&gt;Written by me&lt;/cite&gt;
  &lt;/div&gt;
  </code></pre>