overflow:hidden and negative width

Seems to cause the overflow to be ignored?

[vincevincevince]

Example:

This works, displaying the DIV 60px wide (20 padding-left, 20 padding-right, 20 width):
<div style="width:20px;padding:20px;overflow:hidden"> </div>

If I want to have a final width of 20px without losing my padding, I should specify a width of -20:
<div style="width:-20px;padding:20px;overflow:hidden"> </div>

This shows the DIV as if overflow:hidden and width:-20 weren't there at all (FF)...

How can I get around this? I want to have the DIV displayed width equal to the padding on one side.

[vincevincevince]

Update - I suspect the problem is that the width has to be at least equal to the sum of the padding... tests seem to support that. It's okay - I cut the padding-left: to 0px so that the padding-right at 20px and width at 0px leave a 20px wide box.

Next problem is... the box should be empty but isn't!

In the code below:
<div style="padding-right:20px;width:0px;height:20px;overflow:hidden">TEST</div>

The entire width should be taken up by padding, and so the DIV should appear entirely empty. For some reason, I get the first part of TEST in there (FF). Can anyone explain this?

As a test, I put the padding on the left, and it left me with an empty-looking DIV, which is correct. So why doesn't it work with padding-right?

More test results:

Results in 'TE' being visible, despite the content area being 0px and overflow:hidden being set
<div style="padding-right:20px;width:0px;height:20px;overflow:hidden">TEST</div>
<div style="padding-bottom:20px;width:20px;height:0px;overflow:hidden">TEST</div>

Correctly displays only padding (i.e. nothing)
<div style="padding-left:20px;width:0px;height:20px;overflow:hidden">TEST</div>
<div style="padding-top:20px;width:20px;height:0px;overflow:hidden">TEST</div>

Can anyone help me with this? The reason I want to use one of the non-working methods is that I want an 'information' box with a background-image icon in the top right and the box width and height set to match the icon exactly (i.e. all information in the hidden overflow). The behaviour on :hover will be to increase the width and set height to auto... works fine with an icon on the left and padding on the left to keep the text away from it - but not when the icon is on the right!

[penders]

Not sure if I fully appreciate what you are after, but I'm having an almost overwhelming urge to use a container DIV and set the padding on the container instead...?

Along the lines of:

<div style="padding-right:20px;width:0;height:20px;overflow:hidden"> 
<div style="width:0;overflow:hidden;">TEST</div> 
</div>

?