box with smallest width possible

while still showin all text contained inside

[partha]

I have this:

.tag {
padding: 4px;
margin: 3px;
font-size: .9em;
font-weight: bold;
text-transform: uppercase;
color: white;
background-color: darkgreen;
}

trouble is, it makes the darkgreen box the 100% the width of its parent (body). In IE6, just adding width: 0; gives me the desired result, but it fails in Firefox and Opera.

How can I make this cross-compatible?

[jfjet]

.tag here as you had it is a class, meaning it can be apply to any HTML element. So if you use it like <div class="tag">...</div> then the <div> will take up 100% of whatever available space, because <div> is a "block level element" (also implies line-breaks before and after itself), and you don't have a specific width specified. But if you apply ".tag" to an "inline element" such as a <span> tag, then it'll take up only whatever the width its content will take up.

You can also make the class "float", so it'll take up only the width of its content, or your specified width.

[jfjet]

Here's an example to show you the difference. Paste it into a test HTML page to see its effect.

<div style="background: #eee; width: auto;"><span style="background: #f00;">ABC<span></div>