CSS: Max-Width won't shrink? [duplicate]

Question

Possible Duplicate:
Make CSS Div Width Equal To Contents

I am trying to make a chat like application but now I ran acros a little bug of some sort.

I have a div with a max-width set to 350px. But when I put the following text in it:

dddddddddddd ddddddddddd dddddddddd dddddddddd

It will add new lines at every space but the width of the div will stay at 100px. I made a little example in jsFiddle here:

http://jsfiddle.net/5t2hm/12/

As you can see the width of the yellow box is 100px while I want it to shrink to the width of the text. I also tried to fix it with using a element but the yellow box remains the same.

Bascily I want it to look like the third box while retaining the max-width part.

Does someone got any idea how the yellow box will shrink to the width of the text?

Answer 1

check this fiddle1 or fiddle2.

Instead of using one div use two div's (or)
one div and one span. I think this is what you want.

Answer 2

Use para

<p></P>

Demo: fiddle

Answer 3

The default width of a DIV is 100%, so max-width is just capping that in your fiddle - it won't consider the width of the content.

To shrink your DIV to its content you'd need display: inline-block; or float:left; width:auto;.

http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/