How can I create a variable-width container without a table?

Question: How can I create a variable-width container without a table?

I put up an article on why to use CSS for layout, and Denver found one situation where tables do something that CSS can't (at least not in Internet Explorer). Denver wrote:

<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?

Answer:

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).

See it in action

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.