Re: Basic math operations

On Mon, Oct 25, 2010 at 7:42 AM, Jonas Hartmann
<j0n4s.h4rtm4nn@googlemail.com> wrote:
> Hello,
>
> I wanted to ask on the state of discussion on CSS and basic math operations (addition, subtraction, division, multiplication,...)
>
> Primary use case would be position or box model calculations like width:100%-2em-1pt; padding: 1em; border: 1px solid blue;

Basic math can be done using the calc() function, defined in CSS3
Values & Units <http://dev.w3.org/csswg/css3-values/#the-calc-min-and-max-functions>.
 It's designed precisely for cases like you describe:

foo {
  width: calc(100% - 2em - 2px);
  padding: 1em;
  border: 1px solid blue;
}

Note, though, that your particular case can be done more easily with
the 'box-sizing' property.  'box-sizing' changes which box the 'width'
and 'height' properties control.  By default it's the content box, but
it can be set to padding-box or border-box as well:

foo {
  box-sizing: border-box;
  width: 100%;
  padding: 1em;
  border: 1px solid blue;
}


~TJ

Received on Monday, 25 October 2010 22:40:51 UTC