How to increase div width according to the text inside it?

Question

I have a div that users input text in it. But I want to increase it's width according to it's text, until a max of 50% of the screen. My CSS code:

.messages {
   max-width:50%;
   min-width:150px;
   background: #ffeec0;
   padding:2px;
   margin:3px;
   -webkit-border-radius: 2px;
   border-radius: 2px;
   border:1px solid #ffdd7c;
}

Result:

There's a lot of space after the "555" message, I want this size only if the user inputs some text like:

So, how can I increase the div's width dinamically, depending on the text size?

Answer 1

There are many ways to achieve this, but IMHO the cleanest is the following. Your problem is that the boxes are "greedy" and will try to expand to the available width.

To prevent this, you can:

• Make it "float: left;"
• But also "clear: left;" to prevent additional "left floating" elements to use the available space on the right.

The CSS becomes:

.messages {
   max-width:50%;
   min-width:150px;
   background: #ffeec0;
   padding:2px;
   margin:3px;
   border-radius: 2px;
   border:1px solid #ffdd7c;
   float:  left;
   clear: left;
}

I provided full code and additional explanation (on mouseover) on the Liveweave here: http://liveweave.com/DFCZFj

Answer 2

Try changing display type of the div to table.

Example Here

.messages {
   display: table;
   max-width: 50%;
   min-width: 150px;
   /* other declarations omitted due to brevity */
}