richard said:
In CSS width has two basic uses.
1) width: auto; causes the element to expand the entire width of it's
container.
Yes, along with and including any borders, margins and paddings.
Mostly such width is the default and needs no special mention by
an author.
2) width:100px defines the width to be that and no more or no less.
And just to note, em widthing, in contrast to px widthing, gives
a very often useful flexibility. A pixel widthing of an element
does not even have the smell of shrink-to-fit quality; whereas em
widthing is the author's manual opportunity to give it this
quality. Ben C has covered the automatic shrink-to-fit
possibilities, I come to give a more human, warmer message.
....
What I am looking at doing is basing the width on the content .
<div>example 1</div>
<div> This is example 2</div>
I don't see the need of having a 500px wide division just to show something
short in it like "Hi!".
If no one can see the width of an element, and this very much
depends on the context and the styling, but just the text, there
is a particular need *not* to limit the width based on the
principle that less is more.
Now this is a slightly subtle principle, it needs to be
understood right. You might think that limiting the width of an
element is making it less and no more than it needs to be, and so
is a prize candidate for being less than the more of the
principle. But there is a deeper argument to do with more general
matters: basically, don't mess about if you don't need to, the
defaults being there for good general reasons.
I note that you did not leap on the positional possibilities that
were mentioned but settled on an inline span element for some
task you had in mind. A good choice if your aim is to style the
surrounds of the text inside, like a highlit background.
But, just to note, a span is hardly shrink-to-fit in the usual
sense. In a way, nothing is ever shrunk and nothing is ever in
danger of expanding, nothing is much calculated. But in another
way it does: like an author controlled em widthing, it shrinks
and expands with the text size but that is mostly down to the
text and I at least do not admire a span for this. I admire a
float, I greatly admire a table cell, but I find it hard to be
awed by the humble span. I know, it is a harsh judgement. But
there it is.
