CSS min-width, max-width, and min-height with display:inline

[Lois]

I've read through the min-width and max-height threads, and they're
informative, but I can't find the solution to my particular problem.

I have a box of text containing a couple of words up to a couple of
sentences that's going to appear in the top left corner of the page.
It can take up to about 65% of the page width but not more because
the page title is in the top right corner. I want the box to be no
wider than the 2 words if that's all the text that's in it, but to
expand in width and height for longer text.

"Display:inline" gets the box to expand and yet not be too wide for
small amounts of text. The problem is when the text is more than 65%
of the page width, especially when it needs to line-wrap.
Display:inline doesn't let it wrap. Is there a way to get the text to
wrap with display:inline? Or is there a way to have the box width no
wider than the text yet wide enough without display:inline?

You can see what I'm trying to do at
http://beta.wordsweave.com/temp.html. (The width in the CSS is for
NN4 only.) The first 3 boxes are probably OK, although the first one
might be a problem with small browsers. The 4th one is too long. If
you shrink the window width, the line breaks, but they don't wrap
within the same box. The last one has a <br> inserted, and it has the
same effect that shrinking the window width does with the 4th box.

Any ideas?

Thanks,
Lois

 

[Ryan Stewart]

I've read through the min-width and max-height threads, and they're
informative, but I can't find the solution to my particular problem.

I have a box of text containing a couple of words up to a couple of
sentences that's going to appear in the top left corner of the page.
It can take up to about 65% of the page width but not more because
the page title is in the top right corner. I want the box to be no
wider than the 2 words if that's all the text that's in it, but to
expand in width and height for longer text.

"Display:inline" gets the box to expand and yet not be too wide for
small amounts of text. The problem is when the text is more than 65%
of the page width, especially when it needs to line-wrap.
Display:inline doesn't let it wrap. Is there a way to get the text to
wrap with display:inline? Or is there a way to have the box width no
wider than the text yet wide enough without display:inline?

You can see what I'm trying to do at
http://beta.wordsweave.com/temp.html. (The width in the CSS is for
NN4 only.) The first 3 boxes are probably OK, although the first one
might be a problem with small browsers. The 4th one is too long. If
you shrink the window width, the line breaks, but they don't wrap
within the same box. The last one has a <br> inserted, and it has the
same effect that shrinking the window width does with the 4th box.

In accordance with the spec, width and height may not be applied to inline
elements. You probably want a floated or absolutely positioned block level
element. You can then use max- and min- width and height. Note that IE
doesn't support these properties (as you'll have seen in those threads).
Another alternative would be setting the element to "display: table". That
will get the wrap-to-text-width effect you want. However, IE again doesn't
support this value. As to your lines not wrapping "within the same box",
take a closer look. They are in the same box. That's what an inline box
looks like.