# CSS: “width”: The types are incompatible.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-width-the-types-are-incompatible
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

This error originates from CSS validation, not HTML element validation. It typically appears when the validator encounters a `width` value in a `style` attribute or `<style>` block that doesn't conform to the CSS specification for the `width` property. The CSS `width` property accepts `<length>`, `<percentage>`, `auto`, `min-content`, `max-content`, `fit-content`, or `fit-content(<length-percentage>)` values. Anything outside these types—or an expression that produces an incompatible type—will trigger this error.

Common causes include:

- **Missing units on a numeric value.** In CSS, `width: 400` is invalid (unlike the HTML `width` attribute on elements like `<img>`, which expects a unitless integer). CSS requires a unit such as `px`, `em`, `rem`, `%`, `vw`, etc., unless the value is `0`.
- **Invalid `calc()` expressions.** For example, `calc(100% - 20)` is invalid because `100%` is a percentage and `20` has no unit—you cannot subtract a unitless number from a percentage. It should be `calc(100% - 20px)`.
- **Typos or unrecognized values.** Things like `width: 50 px` (space between number and unit), `width: autopx`, or `width: 100pixels` are not valid CSS.
- **Using HTML attribute syntax in CSS.** Writing `width: 400` in a stylesheet because you're used to writing `<img width="400">` in HTML.

This matters for **standards compliance** and **cross-browser reliability**. While some browsers may attempt to interpret invalid values, the behavior is undefined and inconsistent. Relying on invalid CSS can lead to broken layouts in certain browsers or future browser versions.

## How to Fix It

1. **Add proper units** to any bare numeric `width` value in your CSS. Use `px`, `em`, `rem`, `%`, `vw`, or another valid CSS length unit.
2. **Check `calc()` expressions** to ensure both sides of addition or subtraction are compatible types (e.g., length with length, or percentage with length—both are valid in `calc()`). Unitless numbers (other than `0`) cannot be mixed with lengths or percentages in addition/subtraction.
3. **Remove spaces** between numbers and their units. `50px` is valid; `50 px` is not.
4. **Use valid keywords** only: `auto`, `min-content`, `max-content`, `fit-content`.

## Examples

### Incorrect: Missing unit in inline style

```html
<div style="width: 400;">Content</div>
```

### Correct: Adding a proper unit

```html
<div style="width: 400px;">Content</div>
```

### Incorrect: Incompatible types in `calc()`

```html
<div style="width: calc(100% - 20);">Content</div>
```

The value `20` has no unit, so it cannot be subtracted from a percentage.

### Correct: Compatible types in `calc()`

```html
<div style="width: calc(100% - 20px);">Content</div>
```

### Incorrect: Space between number and unit

```html
<p style="width: 50 %;">Some text</p>
```

### Correct: No space between number and unit

```html
<p style="width: 50%;">Some text</p>
```

### Incorrect: Unitless number in a `<style>` block

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Example</title>
  <style>
    .sidebar {
      width: 300;
    }
  </style>
</head>
<body>
  <aside class="sidebar">Sidebar content</aside>
</body>
</html>
```

### Correct: Valid length value in a `<style>` block

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Example</title>
  <style>
    .sidebar {
      width: 300px;
    }
  </style>
</head>
<body>
  <aside class="sidebar">Sidebar content</aside>
</body>
</html>
```

### Note on the HTML `width` attribute

Don't confuse CSS `width` with the HTML `width` attribute. The HTML `width` attribute on elements like `<img>`, `<video>`, and `<canvas>` expects a **unitless integer**:

```html
<img src="photo.jpg" width="400" alt="A sample photo">
```

Writing `width="400px"` in an HTML attribute is a separate validation error. The CSS error discussed in this guide specifically concerns `width` values in stylesheets or `style` attributes where a valid CSS length is required.
