Stylesheets - Maximum width

Author

Maximum width

p.numminen@suomi24.fi

2007-04-15, 6:17 pm

Is it possible, with CSS, to determine a certain _maximum_ width for a
text, paragraph, division, etc.?

Rob Kerr

2007-04-15, 6:17 pm

p.numminen@suomi24.fi wrote in
news:1176639644.621809.90760@d57g2000hsg.googlegroups.com:

> Is it possible, with CSS, to determine a certain _maximum_ width
> for a text, paragraph, division, etc.?

Only by going round the houses, and defining a max width by
constraining it to a certain max width due to the surrounding elements.
i.e. You cannot set a max width on a specific container, only an
absolute width. But you can allow a container to float, and increase
in size until it is prevented by an abutting container. I'm finding it
hard to think of a situation in which such would be desirable, however.

Rob Kerr
--
"It's impossible for an Englishman to open his mouth without making
some other Englishman despise him."
-- G.B.S., "Pygmalion"

Jukka K. Korpela

2007-04-15, 6:17 pm

Scripsit Rob Kerr:

> p.numminen@suomi24.fi wrote in
> news:1176639644.621809.90760@d57g2000hsg.googlegroups.com:
>
>
> Only by going round the houses, and defining a max width by
> constraining it to a certain max width due to the surrounding
> elements.

Huh? What are you talking about?

> You cannot set a max width on a specific container,
> only an absolute width.

Please check CSS manuals and references.

> But you can allow a container to float, and
> increase in size until it is prevented by an abutting container. I'm
> finding it hard to think of a situation in which such would be
> desirable, however.

That sounds _very_ confused.

The short answer to the original question is that you can set max-width for
a block element, and this is well-supported except by IE. On IE, there is no
support before IE 7, and on IE 7, the support has some bugs. But in simple
cases, max-width is fine, if you are not too worried about the fact that IE
users will see the width unlimited unless they have already upgraded to IE
7. Oh, and you need to make sure your page is treated in Standards Mode;
this might be nontrivial if it's an old, poorly coded page.

Example:

body { max-width: 40em; }

There are ways to overcome the limitations (i.e. to set a maximum width in a
manner that works on IE 6 and older, too), but they involve some trickery
(like an auxiliary single-cell table).

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Ben C

2007-04-15, 6:17 pm

On 2007-04-15, Jukka K. Korpela <jkorpela@cs.tut.fi> wrote:
> Scripsit Rob Kerr:
>
>
> Huh? What are you talking about?
>
>
> Please check CSS manuals and references.
>
>
> That sounds _very_ confused.

I think it makes sense. Remember the computed value for a shrink-to-fit
width is min(max(content min, available), content preferred) where
"content min" is the width of the longest unbreakable sequence in the
content, and "content preferred" is its width with no line breaks at
all (except where they're explicitly asked for).

This effectively gives the float in this example a width of up to 400px,
but its width will be much less than that since the width of "Hello world"
is likely to be shorter than 400px:

<div style="width: 400px">
<div style="float: left">
Hello world
</div>
</div>

If we add more words to the inner div, its width will increase but not
go past 400px (unless it contains a single "word", or unbreakable
sequence, longer than 400px).

Jukka K. Korpela

2007-04-16, 3:16 am

Scripsit Ben C:

>
> I think it makes sense.

_Your_ text makes sense, though you are not correct in an essential point,
but the answer I was commenting on was very confused, starting from the
point where it claimed that maximum width cannot be set directly in CSS. (As
I described, there are still serious problems in browser support, but that's
a different issue.)

> This effectively gives the float in this example a width of up to
> 400px, but its width will be much less than that since the width of
> "Hello world" is likely to be shorter than 400px:
>
> <div style="width: 400px">
> <div style="float: left">
> Hello world
> </div>
> </div>

This approach also makes the width of the outer div exactly 400 pixels, and
that's something that we usually want to avoid when setting _maximum_ width.
There are good reasons for limiting the width of paragraphs by setting a
maximum width, _without_ setting a fixed width. Nominally, your approach
does that for the inner div, but at the cost of setting that fixed width,
which forces horizontal scrolling when the available space is narrower than
400 pixels.

If you want to set a maximum width of 400 pixels for a piece of text without
setting any fixed width (or minimum width) for anything, and you are
prepared to using tricks in order to make things work on IE 6 and older too,
then the old approach of using a single-cell table is still the practical
way:

<table><tr><td width="400">The text goes here</td></tr></table>

You can then add a style="width: ..." attribute into the <td> tag to set a
maximum width in more reasonable units, like em, for CSS-enabled browsers.

Granted, this will set the width to exactly 400 pixels (or the width
property setting), if there is available space. This should not be a
problem, if the purpose is just to limit the line length in paragraphs - the
good and common cause - or something similar. You normally don't even see
what the width is, unless you have a border or a background (and if that's a
problem, use an inner <span> element and set border and background for it
rather than the cell). The point is that due to the way tables are handled
in graphic browsers, the width automatically becomes smaller than declared
if there is not enough room.

This approach implies that the text box will be wider than you set, if there
are long strings no line break points recognized by the browser. But this is
a separate issue and should be treated separately anyway.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/