- From: David Eisenberg <david@catcode.com>
- Date: Fri, 2 Mar 2001 14:33:10 -0500 (EST)
- To: www-style@w3.org
Background
==========
Many web designers make websites using dimensions in percentages to keep
the ratios of areas on the screen in pleasing proportion as the user agent
window shrinks or grows. This liquid design becomes difficult with
standards-compliant CSS, since a width specification describes only the
content box, and not the padding, borders, or margins. Thus, these
classes
.index-class { width: 25%; margin: 5px; padding: 6px; }
.content-class { width: 75%, margin: 3px; padding: 4px; }
will not give you a nice liquid layout; the total width is
100% plus 36 pixels (margin plus padding times two).
For a detailed example, see page four of the article at
http://www.alistapart.com/stories/journey/, where
the author says,
"I couldn't exactly write this in my Style Sheet:
{width: 75% AND PLEASE IGNORE THE PADDING}"
Although CSS-3's box-sizing property
(see http://www.w3.org/TR/css3-userint#box-sizing)
addresses much of the problem, the following proposal may be
independently useful:
Proposal
==========
Expand the syntax of CSS to include DIMENSION-EXPRESSION, defined as
(DIMENSION | PERCENTAGE) ( + | - ) ( DIMENSION | PERCENTAGE)
Thus allowing you to solve the liquid layout problem by specifying
.index-class {width: 25%-22px; margin: 5px; padding: 6px; }
.content-class {width: 75%-14px; margin: 3px; padding: 4px; }
Comments/Consequences
=====================
1) Parsing a length would become more difficult; since I am not a
computer science kind of guy, I am not sure if they could be
parsed unambiguously.
2) I am not proposing a full expression language with parentheses
and multiplication/division/modulo operators; just addition and
subtraction. I believe this is sufficient to meet the needs of people
who want liquid layouts.
3) The proposal allows mixing of units with a straightforward and
clear syntax.
---
J. David Eisenberg
http://catcode.com/
Received on Saturday, 3 March 2001 18:00:33 UTC