

Re: Unlogical width with percentages

From: Ian Hickson <py8ieh@bath.ac.uk>
Date: Sun, 10 Oct 1999 09:25:26 +0100 (BST)
To: Erik Arvidsson <d96erik@dtek.chalmers.se>
Message-ID: <Pine.GSO.4.04.9910100916210.507-100000@amos.bath.ac.uk>
On Sun, 10 Oct 1999, in mozilla-layout@mozilla.org, Erik Arvidsson wrote:

> My goal is to have a container that fills the entire parent width and it
> should also have a border on each side. How can this be achieved in CSS?
> When looking at the CSS2 specs I find the following:
> <percentage>
> Specifies a percentage width. The percentage is calculated with respect to
> the width of the generated box's containing block.
> This means that if I set the width to 100% the element will not fit in the
> parent because:
> 'margin-left' + 'border-left-width' + 'padding-left' + 'width' +
> 'padding-right' + 'border-right-width' + 'margin-right' = width of
> containing block
> Is this really the desired behavior? I think the most logical width would be
> width = percentage * ('width of containing block' - ('margin-left' +
> 'border-left-width' + 'padding-left' + 'padding-right' +
> 'border-right-width' + 'margin-right'))
> This is the way IE renders the container and yes I know it is not correct
> but it is much more logical and I think it is not IE that is wrong but the
> W3C CSS2 spec that is!

The current CSS3 drafts introduce a property which can be used to change
what 'width' actually means, called 'box-sizing'. It currently takes the
values 'content-box' and 'border-box'; I propose we add 'padding-box' and
'margin-box' for consistency.

Then you could say:

   { width: 100%; box-sizing: margin-box; border: thick solid; }

...to do what you describe.

Ian Hickson
probability that they may be right."
Received on Sunday, 10 October 1999 04:25:38 GMT
