Petr Peller Petr Peller - 1 month ago 5
CSS Question

Setting width:auto leads to width:100%

I am a little bit tired right now (out of coffee), so I am unable to figure this out.

When I set

p.style.width = auto
(the blue one), why is its
width
at 100%? None of the elements have their width set to 100%, so I doubt it's inherited property.

How can I set the
<p>
's width to match its content width plus padding?

Sample page link

Answer

Because width:auto defaults to 100% (that is, minus borders and paddings, see here), if you are not in a floating / positioned environment. Actually, without

float:left

or

position: absolute

you're quite out of luck setting the width of an element to a minimum in CSS only. See, e.g., here for how you could achieve it in Firefox (only).

Edit: You could also use

display: table;
width: auto;

but, for one, this is also not supported in all browsers and then the table design may bring you in all kinds of other trouble.

Edit 2: You might, as suggested by DisgruntledGoat, also try display:inline-block. This page gives a cross-browser implementation targeting IE6+, FF2+, Safari 3+ and Opera.