About This HTML Issue
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: 400is invalid (unlike the HTMLwidthattribute on elements like<img>, which expects a unitless integer). CSS requires a unit such aspx,em,rem,%,vw, etc., unless the value is0. -
Invalid
calc()expressions. For example,calc(100% - 20)is invalid because100%is a percentage and20has no unit—you cannot subtract a unitless number from a percentage. It should becalc(100% - 20px). -
Typos or unrecognized values. Things like
width: 50 px(space between number and unit),width: autopx, orwidth: 100pixelsare not valid CSS. -
Using HTML attribute syntax in CSS. Writing
width: 400in 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
-
Add proper units to any bare numeric
widthvalue in your CSS. Usepx,em,rem,%,vw, or another valid CSS length unit. -
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 incalc()). Unitless numbers (other than0) cannot be mixed with lengths or percentages in addition/subtraction. -
Remove spaces between numbers and their units.
50pxis valid;50 pxis not. -
Use valid keywords only:
auto,min-content,max-content,fit-content.
Examples
Incorrect: Missing unit in inline style
<div style="width: 400;">Content</div>Correct: Adding a proper unit
<div style="width: 400px;">Content</div>
Incorrect: Incompatible types in calc()
<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()
<div style="width: calc(100% - 20px);">Content</div>Incorrect: Space between number and unit
<p style="width: 50 %;">Some text</p>Correct: No space between number and unit
<p style="width: 50%;">Some text</p>
Incorrect: Unitless number in a <style> block
<!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
<!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:
<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.
Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.