# CSS: X: One operand must be a number.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-x-one-operand-must-be-a-number
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

CSS math functions like `calc()`, `min()`, `max()`, and `clamp()` follow strict rules about how operands and operators interact. The error "one operand must be a number" most commonly fires in two scenarios: either an operand is missing entirely (e.g., `calc(100% - )`), or both operands in a multiplication or division carry units (e.g., `calc(10px * 5px)`). The CSS Values and Units specification requires that for `*` (multiplication), at least one side must be a unitless `<number>`. For `/` (division), the right-hand side must always be a unitless `<number>`. You cannot multiply two lengths together or divide a length by another length within `calc()`.

This matters for several reasons. Browsers will discard the entire property declaration if the `calc()` expression is invalid, which can cause layout breakage or fallback to unexpected default values. The W3C validator catches these errors in inline `style` attributes and embedded `<style>` blocks, helping you identify expressions that will silently fail in production. Fixing these issues ensures predictable rendering across all browsers.

### How the rules work

- **Addition and subtraction** (`+`, `-`): Both operands must have compatible types (e.g., both lengths, or both percentages, or a mix of length and percentage). Both must be present.
- **Multiplication** (`*`): At least one operand must be a plain `<number>` (unitless). You can write `calc(10px * 3)` or `calc(3 * 10px)`, but not `calc(10px * 5px)`.
- **Division** (`/`): The right-hand operand must be a plain `<number>` (unitless and non-zero). You can write `calc(100px / 2)`, but not `calc(100px / 2px)`.

## Examples

### Missing operand

A common mistake is leaving out a value on one side of an operator:

```html
<!-- ❌ Wrong: missing operand after the minus sign -->
<div style="width: calc(100% - );"></div>
```

```html
<!-- ✅ Fixed: both operands are present -->
<div style="width: calc(100% - 50px);"></div>
```

### Multiplying two values with units

You cannot multiply two unit-bearing values together, because the result would be a meaningless type like "px²":

```html
<!-- ❌ Wrong: both operands have units -->
<div style="width: calc(10px * 5px);"></div>
```

```html
<!-- ✅ Fixed: one operand is a unitless number -->
<div style="width: calc(10px * 5);"></div>
```

### Dividing by a value with units

The divisor in a `/` operation must be a unitless number:

```html
<!-- ❌ Wrong: dividing by a value with units -->
<div style="height: calc(500px / 2em);"></div>
```

```html
<!-- ✅ Fixed: divisor is a unitless number -->
<div style="height: calc(500px / 2);"></div>
```

### Nested `calc()` with a missing value

Errors can hide inside nested expressions:

```html
<!-- ❌ Wrong: inner calc has an incomplete expression -->
<p style="margin-top: calc(2rem + calc(100% * ));"></p>
```

```html
<!-- ✅ Fixed: all operands are present and valid -->
<p style="margin-top: calc(2rem + calc(100% * 0.5));"></p>
```

### Using variables or keywords where a number is expected

Sometimes a typo or misunderstanding leads to a non-numeric token where a number is required:

```html
<!-- ❌ Wrong: "auto" is not a valid operand in calc() -->
<div style="width: calc(auto * 2);"></div>
```

```html
<!-- ✅ Fixed: use a numeric value or percentage -->
<div style="width: calc(100% * 2);"></div>
```

To resolve this error, review every `calc()`, `min()`, `max()`, and `clamp()` expression in your inline styles and stylesheets. Confirm that all operators have valid operands on both sides, that `*` always has at least one unitless number, and that `/` always has a unitless number on the right. If you're building expressions dynamically (e.g., via JavaScript or a templating engine), double-check that variables are being interpolated correctly and not producing empty or invalid values.