Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > CSS min-width, max-width, and min-height with display:inline

Reply
Thread Tools

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

 
 
Lois
Guest
Posts: n/a
 
      12-26-2004
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



 
Reply With Quote
 
 
 
 
Ryan Stewart
Guest
Posts: n/a
 
      12-27-2004
"Lois" <(E-Mail Removed)> wrote in message
news:APHzd.1593$(E-Mail Removed)...
> 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.


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS MENU and CSS photo gallery desjardins.daniel@gmail.com Javascript 1 02-19-2006 06:22 PM
Whining and bitching about MSIE 6 CSS bugs and CSS support =?ISO-8859-1?Q?G=E9rard_Talbot?= HTML 0 07-09-2005 06:48 AM
CSS Layout question - how to duplicate a table layout with CSS Eric ASP .Net 4 12-24-2004 04:54 PM
Is there a way to set the a CSS property to be explicitly the same as another CSS property? Joshua Beall HTML 1 12-10-2003 07:21 PM
print.css and screen.css tom watson HTML 1 09-09-2003 02:48 PM



Advertisments