title: CSS auto adjust not FULL width problem
body: <p>I want to do so the size of the bubble, is auto-adjusting after the text(comment) which is inside the div..
  Firstly heres the code:
      .bubble {
          font-size: 12px;
          margin-bottom: 0px;
      }</p>
  
  <pre><code>.bubble blockquote {
      margin: 0px;
      padding: 0px;
      border: 1px solid #c9c2c1;
      background-color: #000;
  }
  .bubble blockquote p {
      display: inline;
      margin: 0px;
      padding: 0px;
          font-size: 18px;
  }
  
  .bubble cite {
      position: absolute;
      margin: 0px;
      padding: 7px 0px 0px 15px;
      top: 5px;
      background: transparent url(b/tip.gif) no-repeat 20px 0;
      font-style: normal;
  }
  </code></pre>
  
  <p>And the page:</p>
  
  <pre><code>&lt;div class="bubble"&gt;
  &lt;blockquote&gt;
  &lt;p&gt;
  Hello, my name is Azzyh
  &lt;/p&gt;
  &lt;/blockquote&gt;
  &lt;cite&gt;I wrote this today&lt;/cite&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now as i said, i want it to auto adjust to the text, so the "bubble" is around "hello, my name is azzyh"..</p>
  
  <p>Not like how it is now:
  <a href="http://img341.imageshack.us/img341/8303/exampleu.png" rel="nofollow noreferrer">http://img341.imageshack.us/img341/8303/exampleu.png</a>
  As you see it goes all out to the browser's right+left end..</p>
  
  <p>Check the image, you'll see the line (the "box") where the text is, are too big for the text. I want css to adjust the box after the text.. so the "lines" gets around the text "hello my name is" sorry for my english</p>
  
  <p>See this image: 
  <a href="http://img17.imageshack.us/img17/6057/exampleph.png" rel="nofollow noreferrer">http://img17.imageshack.us/img17/6057/exampleph.png</a>
  The "red" is how i want it to be..</p>
  
  <p>How can i do this?</p>
  
  <p>Thanks</p>