How to dynamically set div size?

I have a div container with a text that has been previously typed in by the user. I would like to adjust the size of the div to this text. I cannot have fixed size because I dont know the length of the text. If there is no size specified div takes the width of entire window. This cause some problems for me because I am using JQuery draggable plugin and the scrollbars appear immediately when the div is 开发者_如何学运维dragged. Any advice on that?

do this with css or with the style property. <div style="display:inline-block"> stuff </div>

display:inline; <--- for opera.

display:inline-block; <--- for other browsers.

You can do the browser check with javascript

something like this

 var divBlock=(navigator.userAgent.indexOf('Opera')>-1)?"inline":"inline-block";

then set the style display option based on that variable

Keep in mind this will cause a flow like behavior so if you need a new line make sure to add <br /> after the div

<div style="display:inline-block;">stuff</div>
<br />
<div style="display:inline-block">stuff 2</div>

OR you can use <span></span> instead of div

<div class="myText">My Text</div>

.myText {
    display: inline;
}

That will change the length of the div to the width. If you want to be able to specify a minimum height and width, use inline-block:

.myText {
    display: inline-block;
    min-width: 40px;
    max-width: 120px; //If you want to start wrapping text at a certain width;
}