Css3 calc function: release with mod statement
I am using: width: calc (100% mod 320);
but always returns the full width of the parent element. There seems to be nothing wrong with the syntax, it looks like a support issue. Tested on chrome 37 and firefox 32.0. Here is the fiddle
<div class="mod">test2</div><!-- it should be 100px -->
.mod{
width:calc(300px mod 200);
}
+3
source to share
2 answers
1) It looks like only IE supports the mod operator and it works as you thought.
2) You need to add px
in modules module (as mentioned in C-link)
3) As @Harry pointed out, the current spec has dropped the mod statement from the calc function
FIDDLE - (try in Internet Explorer)
Sample markup -
<div class="container">
<div class="no">no calc</div>
<div class="simple">simple</div>
<div class="mod1">mod1</div>
<div class="mod2">mod2</div>
<div class="mod3">mod3</div>
<div class="mod4">mod4</div>
</div>
CSS (test cases)
.container {
width: 450px;
border: 1px solid black;
}
.no {
background:aqua;
}
.simple {
width:calc(100% - 100px);
background:green;
}
.mod1 {
width:calc(100% mod 200px); /* = 450 % 200 = 50px */
background:red;
}
.mod2 {
width:calc(100% mod 300px); /* = 450 % 300 = 150px */
background:brown;
}
.mod3 {
width:calc(100% mod 50px); /* = 450 % 50 = 0 */
background:orange;
}
.mod4 {
width:calc(50% mod 100px); /* = 225 % 100 = 25px */
background:yellow;
}
+2
source to share
25% mod 2 (remainder 25% divided by 2)
Helpful link for you, learn how to use this function. How to use the Calc feature in CSS3
CSS
.mod{
width: calc(300px - ((300px / 200) * 200));
background:red;
}
-2
source to share