max-width and word-wrap

Hi there,

Having a bit of an annoying issue with word wrapping. Basically, I have the following HTML:

<div class="medusa-tooltip">
 <div class="medusa-tooltip-header">Matching scope</div>
 <div class="medusa-tooltip-content">This swaps between "Must match 
one from each" (strict) and "Must match just one" (loose) for the 
filters.</div>
</div>

I'll post the entire block of CSS at the bottom. The relevant bit is div.medusa-tooltip has a max-width of 200px - so the content should expand to a max of 200px. This is all happening fine, however after word-wrap, the width of the text is less than 200px, but the div stays expanded at 200px.

If anyone knows of a solution to make the div shrink to the size of wrapped text, I'd much appreciate it.

Note: this is an internal project, for which the entire company is told to use it with Firefox or don't bother using it, so we don't need to consider cross browser support.

CSS:

div.medusa-tooltip {
 background-color: rgba(0, 0, 0, 0.6);
 border-radius: 6px 6px 6px 6px;
 padding: 0px 5px 5px 5px;
 border: 1px solid #000000;
 max-width: 200px;
}

div.medusa-tooltip-header {
 height: 22px;
 line-height: 22px;
 position: absolute;
 top: 0px;
 left: 0px;
 right: 0px;
 border-bottom: 1px solid #c0c0c0;
 font-size: 12px;
 padding-left: 5px;
 background-color: rgba(0, 0, 0, 0.6);
}

div.medusa-tooltip-content {
 margin-top: 25px;
 font-size: 11px;
}

[edited by: alt131 at 7:22 pm (utc) on Aug 7, 2012]
[edit reason] Thread Tidy - Side Scroll [/edit]