CSS auto adjust not FULL width problem

Question

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

.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;
}

And the page:

<div class="bubble">
<blockquote>
<p>
Hello, my name is Azzyh
</p>
</blockquote>
<cite>I wrote this today</cite>
</div>

Now as i said, i want it to auto adjust to the text, so the "bubble" is around "hello, my name is azzyh"..

Not like how it is now: http://img341.imageshack.us/img341/8303/exampleu.png As you see it goes all out to the browser's right+left end..

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

See this image: http://img17.imageshack.us/img17/6057/exampleph.png The "red" is how i want it to be..

How can i do this?

Thanks

Answer 1

div elements are block-level elements that, by default, stretch as far to the left and right as their containing blocks will allow.

In order to get the width of the div to auto-adjust, you'll have to convert it to an inline element, using the same style as you put on the p: display: inline;

Note that this may have the unintended side effect of not automatically forcing each div onto a new line. Without more information, though, I'm not entirely sure if that would be good or bad in your layout.