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