How to auto grow (width) of a div

Question

I have a div

<div id="div1">
</div>

and i am inserting text into it using jquery :

$('#div1').html('abcd');

I want width of this div expands resize according to length of th text inserted. I tried :

   #div1
{
width:auto;
}

but it is not working. Please help.

Answer 1

I think what you want here is inline-block. I've made a JSFiddle for you here, which should do what you want. Type into the textbox and see the div underneath expand as the text does.

HTML

<input type="text" id="input">

<div>
    <div id="out"></div>
</div>

jQuery

$("#input").keyup(function() {
    $("#out").html($(this).val());
});

Answer 2

The default width of a div is auto which means "the width of the parent".

If you need an element which changes width according to its contents, you need an inline element like span.

The only non-inline HTML element which scales with its content is a table. If you don't specify a width for a table, it will grow with its content.