CSS

CSS

🧮 CSS calc() Function

The calc() function in CSS is used to perform mathematical calculations with numeric values.

It allows you to create dynamic and flexible layouts by combining different units such as:

  • px
  • %
  • vw
  • vh
  • em
  • rem

The calc() function is commonly used with properties like:

  • width
  • height
  • margin
  • padding
  • font-size
  • top, left, right, bottom

🎯 Basic Syntax

CSS
property: calc(expression);

✅ Example

CSS
width: calc(100% - 50px);

This means: “Take 100% of the parent width and subtract 50 pixels.”

🧮 Supported Mathematical Operations

Operation Description Example
+ Addition width: calc(100px + 50%);
- Subtraction height: calc(100% - 60px);
* Multiplication width: calc(100px * 2);
/ Division width: calc(100% / 3);

⚠️ Important Spacing Rule

When using + and -, spaces are required around the operators.

✅ Correct:

CSS
width: calc(100% - 20px);

❌ Incorrect:

CSS
width: calc(100%-20px);

Without spaces, some browsers may not interpret the calculation correctly.

🧩 Example Code

CSS

div {
  background-color: yellow;

  width: -webkit-calc(25% + 200px);
  width: -moz-calc(25% + 200px);
  width: -o-calc(25% + 200px);
  width: -ms-calc(25% + 200px);

  width: calc(25% + 200px);
}

🔍 Code Explanation

background-color: yellow;

Sets the background color of the <div> element to yellow.

width: calc(25% + 200px);

Calculates the width dynamically.

The width becomes:

CSS
25% of the parent width + 200px

✅ Example Calculation

If the parent element is 800px wide:

CSS

25% of 800px = 200px
200px + 200px = 400px

So, the final width of the <div> becomes:

CSS
400px

🧱 Vendor Prefixes (-webkit-, -moz-, etc.)

The prefixed versions were used for older browsers that supported experimental CSS features.

Prefix Browser
-webkit- Chrome, Safari
-moz- Firefox
-o- Opera
-ms- Internet Explorer

✅ Modern Usage

Today, modern browsers support calc() without prefixes.

Usually, this single line is enough:

CSS
width: calc(25% + 200px);

🧩 Practical Examples

1. Full Width Minus Sidebar

CSS

.content {
  width: calc(100% - 250px);
}

Useful for layouts with sidebars.

2. Equal Columns

CSS

.box {
  width: calc(100% / 3);
}

Creates three equal-width columns.

3. Responsive Height

CSS

section {
  height: calc(100vh - 80px);
}

Makes the section fill the screen height minus a fixed header.

🧩 Full HTML Example

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS calc() Function</title>
        <style>
            .container {
                width: 800px;
                background-color: lightgray;
                padding: 20px;
            }

            .box {
                width: calc(25% + 200px);
                height: 100px;
                background-color: gold;
                text-align: center;
                line-height: 100px;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <div class="container">

            <div class="box">
                CSS calc() Example
            </div>

        </div>

    </body>
</html>

🧠 Advantages of calc()

  • Creates flexible and responsive layouts
  • Allows combining different units
  • Reduces the need for JavaScript calculations
  • Makes CSS more dynamic and maintainable
  • Useful for modern responsive design systems

⚠️ Common Mistakes

❌ Missing Spaces

CSS
width: calc(100%-20px);

✅ Correct:

CSS
width: calc(100% - 20px);

❌ Overusing Complex Calculations

Very complicated calculations can make CSS harder to read and maintain.

Try to keep expressions simple and clear.

🧠 Summary Table

Feature Description
calc() Performs mathematical calculations in CSS
Supported Operations +, -, *, /
Unit Mixing Can combine %, px, vw, vh, etc.
Responsive Design Very useful for flexible layouts
Browser Support Supported by all modern browsers

  • 🧠 Quick Summary

  • The calc() function is one of the most useful tools in modern CSS.
  • It helps developers build:
  • responsive layouts,
  • flexible sizing systems,
  • dynamic spacing,
  • and cleaner designs
  • without needing extra JavaScript code.
CSS Height
CSS Border