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

html width fieldset
Harsha M V picture Harsha M V · Oct 2, 2010 · Viewed 10.9k times · Source

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

alt text

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

David says reinstate Monica picture David says reinstate Monica · Oct 2, 2010

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

Related questions

<fieldset> resizes wrong; appears to have unremovable `min-width: min-content`

Problem I have a <select> where one of its <option>’s text values is very long. I want the <select> to resize so it is never wider than its parent, even if it has …

Read More
How can I make a div not larger than its contents?

I have a layout similar to: <div> <table> </table> </div> I would like for the div to only expand to as wide as my table becomes.

Read More
How to make a div fill a remaining horizontal space?

I have 2 divs: one in the left side and one in the right side of my page. The one in the left side has fixed width and I want the one of the right side to fill the remaining space.

Read More