HTML Guides for CSS
Learn how to identify and fix common HTML validation errors flagged by the W3C Validator — so your pages are standards-compliant and render correctly across every browser. Also check our Accessibility Guides.
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
<divstyle="width:400;">Content</div>
Correct: Adding a proper unit
<divstyle="width:400px;">Content</div>
Incorrect: Incompatible types in calc()
<divstyle="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()
<divstyle="width:calc(100%-20px);">Content</div>
Incorrect: Space between number and unit
<pstyle="width:50 %;">Some text</p>
Correct: No space between number and unit
<pstyle="width:50%;">Some text</p>
Incorrect: Unitless number in a <style> block
<!DOCTYPE html>
<htmllang="en">
<head>
<title>Example</title>
<style>
.sidebar{
width:300;
}
</style>
</head>
<body>
<asideclass="sidebar">Sidebar content</aside>
</body>
</html>
Correct: Valid length value in a <style> block
<!DOCTYPE html>
<htmllang="en">
<head>
<title>Example</title>
<style>
.sidebar{
width:300px;
}
</style>
</head>
<body>
<asideclass="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:
<imgsrc="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.
The CSS width property contains an invalid value.
The width property accepts specific types of values: lengths (like 100px, 10em, 5rem), percentages (50%), viewport units (100vw), the keyword auto, and sizing keywords like max-content, min-content, or fit-content. The validator rejects anything that doesn't match these formats.
Common mistakes that trigger this error:
- Missing a unit:
width: 100instead ofwidth: 100px. Plain numbers (other than0) are not valid CSS lengths. - Using an invalid unit or typo:
width: 100 px(with a space),width: 100ppx. - Passing a non-length value:
width: red,width: bold,width: none. The keywordnoneworks formax-widthbut not forwidth. - Including extra characters:
width: 100px;50pxorwidth: 100px !importnt.
Invalid example
<divstyle="width: 600">
<p>This box has no unit on its width value.</p>
</div>
The value 600 is not valid because it lacks a CSS unit.
Fixed example
<divstyle="width: 600px">
<p>This box now has a valid width.</p>
</div>
Adding px (or another appropriate unit like em, %, rem, vw) makes the value valid. If the intent is to let the element size itself naturally, use width: auto instead.
Validate at scale.
Ship accessible websites, faster.
Automated HTML & accessibility validation for large sites. Check thousands of pages against WCAG guidelines and W3C standards in minutes, not days.
Pro Trial
Full Pro access. Cancel anytime.
Start Pro Trial →Join teams across 40+ countries