Adjusting width of a div to the width of its content

Searching for a way to have a div which has a fixed width of 50px but grows wider if the content of the div is exceeding 50px.

<div style="width:50px;border:solid 1px red">
<nobr>long text long text long text long text long text</nobr>
</div>

This code works with IE, but not with Mozilla.
With Mozilla the text overflows the container, but the container itself retains 50px width.
I need that the div has the same width as the text in it.

You can control this with the min-width property; IE doesn't support min-width, but incorrectly interprets width as min-width.
If you place your style rule in an internal or external style sheet (an inline style would get very long and messy), you can use a CSS hack/filter to feed IE a value for the width property, then feed compliant browsers an auto width and a value for min-width.

then feed compliant browsers an auto width and a value for min-width.

Do you mean:

div.auto {min-width:50px;width:auto;border:solid 1px red}

<div class="auto">
<nobr>long text long text long text long text long text</nobr>
</div>

This code makes FireFox always use the whole screen width for my div... :(
I'd say it looks the way as if I would define width:100%.
In other words min-width works fine with FireFoox, but it ignores width:auto and displayes width:100% instead.