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.

Answer 2

A similar problem I had was solved by applying the following CSS:

display:inline-block;

I wanted a link to look like a button but not expand the background to fill the width of the containing DIV.

Supported in nearly all browsers, including partial support in IE6 and IE7 but only where element has 'inline' as a default. There are some alternative properties to gain cross-browser support. There is also something on Google Code for setInlineBlock, but I haven't tried this myself.

Answer 3

Move your border property

border: 1px solid #c9c2c1;

from

.bubble blockquote {} 

into your

.bubble blockquote p {}

and that should put the box where you want it.