how can we make a div take width according to its content automatically

Question

I want to create an effect like that of fieldset and label.

When the headings change along the side, the width that the white background of the heading remains the same.

If I can make the heading or div element to take the width enough to fit its content, it will give the proper effect.

If there is any other solution please let me know.

Answer 1

You can use float on the div you want to shrink, or display: inline-block (though that won't work in IE6 (since it applies inline-block only to elements inline by default) without specifying a width. Or you can use both, obviously. Though I'm not sure why you'd want to make a floated-block act as if it was inline.

Demo at jsbin

Answer 2

I would recommend this

#element {
    display: table; /* IE8+ and all other modern browsers */
}