I recommend you keep calculations simple, but it\u2019s possible to use complex formulas, e.g.<\/p>\n

 #element1, #element2 { width: calc((50% + 2em)\/2 + 14px); } <\/code><\/pre>\n
Browser Support<\/h2>\n
The calc() function is a W3C recommendation so guess which browser offers native support?<\/p>\n
You\u2019re wrong. At the time of writing, it\u2019s just Internet Explorer 9. Firefox also supports it with a prefix; -moz-calc(). It\u2019s not been implemented in webkit (Chrome and Safari) or Opera yet but, it\u2019s so useful, I suspect we won\u2019t need to wait long.<\/p>\n
Fortunately, you can use progressive enhancement in your stylesheets:<\/p>\n
\n
\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n<\/td>\n
\n
\n
#element<\/code>1<\/code>, #element<\/code>2<\/code> {<\/code><\/div>\n
\u00a0\u00a0<\/code>width<\/code>: <\/code>45%<\/code>; <\/code>\/* all browsers *\/<\/code><\/div>\n
\u00a0\u00a0<\/code>width<\/code>: -moz-calc(<\/code>50%<\/code> - <\/code>30px<\/code>); <\/code>\/* Firefox 4+ *\/<\/code><\/div>\n
\u00a0\u00a0<\/code>width<\/code>: calc(<\/code>50%<\/code> - <\/code>30px<\/code>); <\/code>\/* IE9+ and future browsers *\/<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n
Remember that you\u2019d also need to adjust margins accordingly, e.g.<\/p>\n
\n
\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n<\/td>\n
\n
\n
#element<\/code>2<\/code> {<\/code><\/div>\n
\u00a0\u00a0<\/code>margin-left<\/code>: <\/code>10%<\/code>; <\/code>\/* all browsers *\/<\/code><\/div>\n
\u00a0\u00a0<\/code>margin-left<\/code>: -moz-calc(<\/code>60px<\/code>); <\/code>\/* Firefox 4+ *\/<\/code><\/div>\n
\u00a0\u00a0<\/code>margin-left<\/code>: calc(<\/code>60px<\/code>); <\/code>\/* IE9+ and future browsers *\/<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n
CSS3 min() and max()<\/h2>\n
If you like calc(), you\u2019ll love the min() and max() functions. They accept two or more comma-separated values and return the minimum or maximum accordingly, e.g.<\/p>\n
\n
\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n<\/td>\n
\n
\n
#myelement {<\/code><\/div>\n
\u00a0\u00a0<\/code>width<\/code>: max(<\/code>300px<\/code>, <\/code>30%<\/code>, <\/code>30em<\/code>);<\/code><\/div>\n
\u00a0\u00a0<\/code>font-size<\/code>: min(<\/code>10px<\/code>, <\/code>0.6em<\/code>);<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n
The functions will be especially useful when using relative font sizes to ensure text does not become too large or small.<\/p>\n
Unfortunately, min() and max() are not currently supported in any of the latest browsers. Let\u2019s hope they appear soon.<\/p>\n
Source Link: http:\/\/www.sitepoint.com\/css3-calc-function\/<\/p>\n<\/section>\n","protected":false},"excerpt":{"rendered":"
There are many hidden gems in the modular CSS3 specifications. In this post we\u2019ll look at calc(); an incredibly useful property which may change the way you approach layout design. The CSS3 calc() function is primarily used to calculate lengths, numbers, angles, transition\/animation times or sound frequencies. However, it allows you to mix measurement types […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[7],"tags":[],"class_list":["post-181","post","type-post","status-publish","format-standard","hentry","category-css3"],"aioseo_notices":[],"yoast_head":"\n