CSS: “width”: Too many values or values are not recognized.

The CSS width property sets an element’s width and accepts a single value. The W3C validator reports this error when it encounters something it cannot parse as a valid width declaration. Common causes include:

• Missing units: Writing width: 300 instead of width: 300px. CSS requires explicit units for non-zero lengths.
• Multiple values: Writing width: 100px 200px as if width accepted shorthand-style multiple values (it doesn’t).
• Typos or invalid keywords: Writing width: auot instead of width: auto, or using a made-up keyword.
• Invalid functions or syntax: Using incorrect function syntax like width: calc(100% - 20px) with missing spaces around operators, or using browser-prefixed values without a standard fallback.
• Unsupported values: Using newer CSS values like fit-content or max-content in a context where the validator’s CSS level doesn’t recognize them.

This matters because invalid CSS can cause browsers to silently discard the entire declaration, meaning your intended layout won’t be applied. Different browsers may handle invalid values differently, leading to inconsistent rendering. Keeping your CSS valid ensures predictable, cross-browser behavior.

Valid values for width

The width property accepts exactly one of the following:

• Length values: A number with a unit, such as 300px, 25em, 10rem, 5vw.
• Percentage values: A percentage relative to the containing block, such as 75%.
• Keyword values: auto, max-content, min-content, fit-content.
• Function values: fit-content(20em), calc(100% - 40px), min(300px, 100%), max(200px, 50%), clamp(200px, 50%, 600px).
• Global values: inherit, initial, revert, revert-layer, unset.

Note that 0 is the only numeric value that does not require a unit.

Examples

Incorrect: missing unit

<style>
  .box {
    width: 300;
  }
</style>
<div class="box">Content</div>

A bare number (other than 0) is not valid. The browser won’t know if you mean pixels, ems, or something else.

Correct: unit provided

<style>
  .box {
    width: 300px;
  }
</style>
<div class="box">Content</div>

Incorrect: too many values

<style>
  .sidebar {
    width: 200px 400px;
  }
</style>
<aside class="sidebar">Sidebar</aside>

Unlike properties such as margin or padding, width only accepts a single value.

Correct: single value

<style>
  .sidebar {
    width: 200px;
  }
</style>
<aside class="sidebar">Sidebar</aside>

Incorrect: typo in keyword

<style>
  .container {
    width: auot;
  }
</style>
<div class="container">Content</div>

Correct: proper keyword

<style>
  .container {
    width: auto;
  }
</style>
<div class="container">Content</div>

Incorrect: malformed calc() expression

<style>
  .panel {
    width: calc(100%-40px);
  }
</style>
<div class="panel">Content</div>

The calc() function requires spaces around + and - operators.

Correct: properly spaced calc() expression

<style>
  .panel {
    width: calc(100% - 40px);
  }
</style>
<div class="panel">Content</div>

Incorrect: accidental semicolon or extra text

<style>
  .card {
    width: 50% important;
  }
</style>
<div class="card">Content</div>

If you intended to use !important, the ! is required.

Correct: proper !important syntax

<style>
  .card {
    width: 50% !important;
  }
</style>
<div class="card">Content</div>

Find issues like this automatically

Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.

Start Free Trial See Pricing