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.