Setting width:auto leads to width:100%

Question

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 `

`'s width to match its content width plus padding? Sample page link

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

Setting width:auto leads to width:100%

Solution

Problem