width:auto question (This should be easy!)

[swofford]

In this page, I want the outer div (with the green border) to automatically be as small as the div within it. In this case, as small as the "hi". I have the inner div set to width:auto; margin:0 auto.

If I set the inner div to a width, then the outer div shrinks to that width. But at width:auto, the width goes to 100%.

This is the code:

<div style="width:100%;text-align:center;">
	<div style="width:auto;margin:0 auto;border:10px solid green;">
    	hi
   	</div>
</div>

This is the URL:

http://littleduck.com/test.html

I'd think that width:auto would tell the inner div to be only as wide as the content within it, but no. What's the workaround here? I can not set a width for this div.

Thank you!

[swofford]

(Sorry, I mistyped ... the green border is around the inner div. Regardless, what I want is for the border to just be around the little "hi" without having to set a width for the div.)

[Derokorian]

you could do the border on the element itself

<div style="width:100&#37;;text-align:center;">
	<span style="border:10px solid green;">
    	hi
   	</span>
</div>

you could use p or h* or whatever.