CSS speech bubble auto size?

Question

/* 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;
}

I have this for my comments.. that looks like "speech bubbles" .

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:

    <div class="bubble">
            <blockquote>
<p>the comment text is here</p>
        </blockquote>
        <cite>Written by me</cite>
</div>

Answer 1

Do you mean to put it like that?

.bubble blockquote p {
    display: inline;
    /*(...)*/
}

See http://www.htmldog.com/reference/cssproperties/display/

Answer 2

I'm not sure quite what you are asking either.

Perhaps you are referring to creating a popup (using images) that scales according to the size of the content? To do that you need multiple overlapping images. It it only scales in one direction (vertically or horizontally) you need two images, if it scales in both directions you need to create four images. This technique is sometimes called "sliding doors".

Answer 3

A div, by default, is block level and, therefore, will expand its width to the width of its parent container (rather than its contents).

Two options to consider would be to set the div to

display: inline-block

Or float it.