calc

  • Revision slug: CSS/calc
  • Revision title: calc
  • Revision id: 36388
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment add new example; 200 words added

Revision Content

{{ CSSMozExtensionRef() }}

Summary

The -moz-calc() CSS function can be used anywhere a {{ Xref_csslength() }} is required. With -moz-calc(), you can perform calculations to determine the size and shape of objects.

Syntax

 <a_css_property>: -moz-calc(expression)

Values

expression
A mathematical expression, the result of which is used as the {{ Xref_csslength() }}.

Expressions

The expression can be any simple expression combining the following operators:

+
Addition
-
Subtraction
*
Multiplication
/
Division
mod {{ unimplemented_inline() }}
Modulo; this returns the remainder left over after dividing two values.

The operands in the expression may be any length syntax value. You can use different units for each value in your expression, if you wish.

Examples

Positioning an object on screen with a margin

-moz-calc() makes it easy to position an object with a set margin. In this example, the CSS creates a banner that stretches across the window, with a 40-pixel gap between both sides of the banner and the edges of the window:

.banner {
  position:absolute;
  left: 40px;
  width: -moz-calc(100% - 80px);
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align:center;
}

{{ CSSLiveSample("-moz-calc1.html") }}

Automatically sizing form fields to fit their container

Another use case for -moz-calc() is to help ensure that form fields fit in the available space, without extruding past the edge of their container, while maintaining an appropriate margin.

Let's look at some CSS:

input {
  padding: 2px;
  display: block;
  width: -moz-calc(100% - 1em);
}

#formbox {
  width: -moz-calc(100%/6);
  border: 1px solid black;
  padding: 4px;
}

Here, the form itself is established to use 1/6 of the available window width. Then, to ensure that input fields retain an appropriate size, we use -moz-calc() again to establish that they should be the width of their container minus 1em. Then, the following HTML makes use of this CSS:

<form>
  <div id="formbox">
  <label>Type something:</label>
  <input type="text">
  </div>
</form>

{{CSSLiveSample(-moz-calc2.html")}}

Browser compatibility

Browser Lowest version
Internet Explorer -
Firefox (Gecko) 4.0 (2.0)
Opera -
Safari (WebKit) -

Specifications

Revision Source

<p>{{ CSSMozExtensionRef() }}</p>
<h3>Summary</h3>
<p>The <code>-moz-calc()</code> CSS function can be used anywhere a {{ Xref_csslength() }} is required. With <code>-moz-calc()</code>, you can perform calculations to determine the size and shape of objects.</p>
<h3>Syntax</h3>
<pre> &lt;a_css_property&gt;: -moz-calc(<em>expression</em>)
</pre>
<h3>Values</h3>
<dl> <dt>expression</dt> <dd>A mathematical expression, the result of which is used as the {{ Xref_csslength() }}.</dd>
</dl>
<h3>Expressions</h3>
<p>The expression can be any simple expression combining the following operators:</p>
<dl> <dt>+</dt> <dd>Addition</dd> <dt>-</dt> <dd>Subtraction</dd> <dt>*</dt> <dd>Multiplication</dd> <dt>/</dt> <dd>Division</dd> <dt>mod {{ unimplemented_inline() }}</dt> <dd>Modulo; this returns the remainder left over after dividing two values.</dd>
</dl>
<p>The operands in the expression may be any length syntax value. You can use different units for each value in your expression, if you wish.</p>
<dl> <h3>Examples</h3>
<h4>Positioning an object on screen with a margin</h4>
<p><code>-moz-calc()</code> makes it easy to position an object with a set margin. In this example, the CSS creates a banner that stretches across the window, with a 40-pixel gap between both sides of the banner and the edges of the window:</p>
<pre class="brush: css">.banner {
  position:absolute;
  left: 40px;
  width: -moz-calc(100% - 80px);
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align:center;
}
</pre>
<p>{{ CSSLiveSample("-moz-calc1.html") }}</p>
<h4>Automatically sizing form fields to fit their container</h4>
<p>Another use case for <code>-moz-calc()</code> is to help ensure that form fields fit in the available space, without extruding past the edge of their container, while maintaining an appropriate margin.</p>
<p>Let's look at some CSS:</p>
<pre class="brush: css">input {
  padding: 2px;
  display: block;
  width: -moz-calc(100% - 1em);
}

#formbox {
  width: -moz-calc(100%/6);
  border: 1px solid black;
  padding: 4px;
}
</pre>
<p>Here, the form itself is established to use 1/6 of the available window width. Then, to ensure that input fields retain an appropriate size, we use <code>-moz-calc()</code> again to establish that they should be the width of their container minus 1em. Then, the following HTML makes use of this CSS:</p>
<pre class="brush: html">&lt;form&gt;
  &lt;div id="formbox"&gt;
  &lt;label&gt;Type something:&lt;/label&gt;
  &lt;input type="text"&gt;
  &lt;/div&gt;
&lt;/form&gt;
</pre>
<p>{{CSSLiveSample(-moz-calc2.html")}}</p><h3>Browser compatibility</h3> <table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest version</th> </tr> <tr> <td>Internet Explorer</td> <td>-</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>4.0 (2.0)</td> </tr> <tr> <td>Opera</td> <td>-</td> </tr> <tr> <td>Safari (WebKit)</td> <td>-</td> </tr> </tbody> </table> <h3>Specifications</h3> <ul> <li><a class="external" href="http://www.w3.org/TR/css3-values/#calc" title="http://www.w3.org/TR/css3-values/#calc">CSS 3 Values and units</a></li> </ul></dl>
Revert to this revision