- From: Ian Hickson <py8ieh@bath.ac.uk>
- Date: Sun, 10 Oct 1999 09:25:26 +0100 (BST)
- To: Erik Arvidsson <d96erik@dtek.chalmers.se>
- cc: mozilla-layout@mozilla.org, www-style <www-style@w3.org>
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 04:25:38 UTC