# CSS: “left”: X is not a “left” value.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-left-x-is-not-a-left-value
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `left` property specifies the horizontal offset of a positioned element — one that has its `position` set to `relative`, `absolute`, `fixed`, or `sticky`. The W3C validator checks CSS within `style` attributes and `<style>` elements, and it will flag any value it cannot recognize as a valid `left` value.

Common causes of this error include:

- **Misspelled or non-existent units**: Writing `10 px` (with a space), `10pixels`, or `20ppx` instead of `10px`.
- **Unsupported keywords**: Using values like `none`, `center`, or `middle`, which are not valid for the `left` property.
- **Missing units on non-zero numbers**: Writing `left: 10` instead of `left: 10px`. Zero is the only number that doesn't require a unit.
- **Typos in keyword values**: Writing `auто` or `autoo` instead of `auto`.
- **CSS custom properties in inline styles**: Using `var(--offset)` in a `style` attribute may trigger validation warnings depending on the validator's CSS level.

The valid values for the `left` property are:

- **`<length>`**: A numeric value with a unit, such as `10px`, `2em`, `3rem`, `1vw`.
- **`<percentage>`**: A percentage relative to the containing block's width, such as `50%`.
- **`auto`**: Lets the browser determine the position (this is the default).
- **Global keywords**: `inherit`, `initial`, `unset`, and `revert`.

Using an invalid value means the browser will ignore the declaration entirely, which can break your layout. Fixing these values ensures consistent rendering across browsers and compliance with CSS standards.

## Examples

### Invalid: Using an unsupported keyword

The keyword `none` is not a valid value for the `left` property.

```html
<div style="position: absolute; left: none;">Positioned element</div>
```

### Invalid: Missing unit on a non-zero number

A bare number (other than `0`) is not valid without a CSS unit.

```html
<div style="position: relative; left: 20;">Shifted element</div>
```

### Invalid: Misspelled unit

The unit `xp` does not exist in CSS.

```html
<div style="position: absolute; left: 15xp;">Positioned element</div>
```

### Valid: Using a length value

```html
<div style="position: absolute; left: 20px;">20 pixels from the left</div>
```

### Valid: Using a percentage

```html
<div style="position: absolute; left: 50%;">Offset by 50% of containing block</div>
```

### Valid: Using the `auto` keyword

```html
<div style="position: absolute; left: auto;">Browser-determined position</div>
```

### Valid: Using zero without a unit

Zero does not require a unit in CSS.

```html
<div style="position: absolute; left: 0;">Flush with the left edge</div>
```

### Valid: Using `inherit`

```html
<div style="position: relative; left: inherit;">Inherits left value from parent</div>
```

To fix this error, identify the invalid value the validator is reporting and replace it with one of the accepted value types listed above. If you intended to reset the position, use `auto` or `0`. If you meant to remove a previously set `left` value, use `initial` or `unset` rather than an unsupported keyword like `none`.