keeping <div>s minimum width to fit content

[partha]

How do I keep divs as small as possible to fit their innards without wrapping?

I just made a div with no special attributes and gave it a background-color, but it's extending across the entire page width.

[createErrorMsg]

Divs are block level elements, which means, amonsgt other things, that they will fill their container's width unless explicitly told to do otherwise.

There are several ways to make a div NOT fill it's container. One that works if you know exactly how wide you want it to be, is to give it an explicit width, as in width:200px;. This isn't always practical, however, such as in situations like the one you describe here where you want the width to match the content.

Another way to prevent this filling-up, yet still retain the block level status of yoru div, is to set it to float, but NOT give it a width. The result of this in most browsers is an effect called "shrinkwrapping." The div's width will shrink down to fit around the text. The caveat, of course, is that the div is now a floated element and will behave as such in the layout. This is not always ideal.

If it doesn't matter whether the div remain block level, you can always set it to display:inline. Inline elements take their width from their content, and ONLY their content. In fact, you can't even specify a different width for an inline element. The caveat here, as well, is that the element is now inline, and will not exhibit other block level behaviors like vertical stacking, creating it's own formatting context, etc.

The final decision on what to do ultimately depends on where and how this particular element falls into the overall structure of your page.

cEM