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

Discussion in 'HTML' started by Lois, Dec 26, 2004.

  1. Lois

    Lois Guest

    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
    Lois, Dec 26, 2004
    #1
    1. Advertising

  2. Lois

    Ryan Stewart Guest

    "Lois" <> wrote in message
    news:APHzd.1593$...
    > 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.
    Ryan Stewart, Dec 27, 2004
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Paul Furman

    min-width max-width again

    Paul Furman, Feb 9, 2004, in forum: HTML
    Replies:
    10
    Views:
    698
    Beauregard T. Shagnasty
    Feb 9, 2004
  2. dorayme

    min and max width in IE <7

    dorayme, Oct 19, 2006, in forum: HTML
    Replies:
    0
    Views:
    313
    dorayme
    Oct 19, 2006
  3. cera
    Replies:
    1
    Views:
    1,241
    Neredbojias
    Aug 18, 2007
  4. Summercool
    Replies:
    9
    Views:
    869
    dorayme
    Oct 23, 2007
  5. kriton
    Replies:
    0
    Views:
    325
    kriton
    Apr 22, 2005
Loading...

Share This Page