In CSS2 browsers, block-level elements can be made to "shrink-to-fit" by setting display to "table", "table-cell" or "inline-block". IE doesn't support any of these*, so I made a script for IE5+ to convert all DIVs with classes containing "shrinkToFit" into single-cell tables.
*Update 5/11/04: Bruno Fassino let me know IE5.5+/win and IE5.2/Mac partially support "display:inline-block". This works only on elements that are inline by default, so you cannot contain block-level elements, but simple headings like above could be achieved without scripting in the later IEs.
Browsers that do not support display:table should silently expand the DIV to 100% width.
Note: Since elements displayed as table and tables themselves have certain quirks (eg. don't support padding), you may need to nest and element inside to apply these properties. As with blocks, centering these elements requires auto left & right margins and IE5.x will require the old text-align method of centering blocks.
| in HEAD | <!--[if gte IE 5]><script type="text/javascript" |
| in BODY | <div class="shrinkToFit"> |