{"id":16489,"date":"2013-02-20T18:01:40","date_gmt":"2013-02-20T10:01:40","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=16489"},"modified":"2025-04-04T01:29:15","modified_gmt":"2025-04-03T17:29:15","slug":"css3-calc-function","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css3-calc-function\/","title":{"rendered":"An Introduction to CSS3 calc() Function"},"content":{"rendered":"

In our previous posts on CSS Pre-processors, we discussed how to calculate lengths with their special functions. Interestingly, CSS3 offers a similar capability through a powerful feature named calc()<\/code>. This post explores how to effectively leverage this function within your stylesheets.<\/p>\n

Simplifying Layouts with calc()<\/h2>\n

The calc()<\/code> function allows for dynamic computation of lengths for properties like width<\/code>, height<\/code>, margin<\/code>, padding<\/code>, and font-size<\/code> using basic math operations: addition, subtraction, division, and multiplication.<\/p>\n

Consider a scenario where you have three <div><\/code> elements within a wrapper. The setup is as follows:<\/p>\n

\r\n<div class=\"col one\">A<\/div>\r\n<div class=\"col two\">B<\/div>\r\n<div class=\"col three\">C<\/div>\r\n<\/pre>\n
Using the calc()<\/code> function, you can easily distribute these <div><\/code> elements into equal-width columns:<\/p>\n
\r\n.wrapper .col {\r\n  width: calc(100% \/ 3);\r\n  padding: 0 10px;\r\n}\r\n<\/pre>\n
This calc(100% \/ 3);<\/code> operation divides the parent\u2019s width by three, resulting in equal-width columns as displayed in browsers.<\/p>\n
\"Equal<\/figure>\n
Check out the demonstration and source code below for a practical application.<\/p>\n
<\/i>  See demo <\/span><\/a>\n<\/i>  Download codes <\/span><\/a><\/p>\n
Kurt Maine has also demonstrated the calc()<\/code> function\u2019s utility in crafting responsive layouts, highlighting its versatility.<\/p>\n
Key Considerations for Using calc()<\/h2>\n
When incorporating the calc()<\/code> function into your CSS, there are several important factors to keep in mind:<\/p>\n