W3C home > Mailing lists > Public > www-style@w3.org > October 1999

Re: Unlogical width with percentages

From: Sjoerd Visscher <sjoerd@heeten.nl>
Date: Sun, 10 Oct 1999 12:25:44 +0200
Message-ID: <000901bf1309$cfff1f20$1400000a@beneden>
To: "www-style" <www-style@w3.org>
I thought the box-sizing was introduced because of IE, and that IE had
border-box as default. Now Ian sais it is margin-box. Or is Erik
Arvidsson's formula not IE's formula?

Sjoerd Visscher
----- Original Message -----
From: Ian Hickson <py8ieh@bath.ac.uk>
To: Erik Arvidsson <d96erik@dtek.chalmers.se>
Cc: <mozilla-layout@mozilla.org>; www-style <www-style@w3.org>
Sent: Sunday, October 10, 1999 10:25 AM
Subject: Re: Unlogical width with percentages


> 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
> "I take a Professor Bullett approach to my answers. There's a high
> probability that they may be right."
>   -- Dr Snow; Mechanics Lecturer at Bath University; 1999-03-04
>
Received on Sunday, 10 October 1999 06:28:50 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:00 GMT