<table> <tr> <td style="background:#cfc;border:double #c8c 5px;padding:0 1em"> When rendered, this box is <em>exactly</em> <br/>as wide as it needs to be. </td> </tr> </table>
There ought to be a way to create this effect without a table. But how?
Unfortunately, this is one situation where browser support isn't consistent. This is an effect of tables themselves, so Web browsers should act this way when you set the display to "table" ie:
<div style="background:#cfc;border:double #c8c 5px;padding:0 1em; display: table;"> When rendered, this box is <em>exactly</em> <br/>as wide as it needs to be. </div>
But Internet Explorer doesn't render it correctly (Firefox, Safari, and Opera do).
According to the IEBlog "display:table is not part of the IE7 release. We know it is a highly requested feature and it is on our "to do" list."
Here's hoping that they get that to do fiinished soon. It's annoying.
One thing to remember however, is that this is a fairly rare occurrence that you would want the block to vary with the width of the content. If you have a design that requires that functionality and you can't get around it by setting percentage widths or other functions, then you should use a table. But this is not a good enough reason to refuse to move to CSS for layout.