left (CSS property)

Spec
Inherited Initial Version
No auto CSS2
Browser support (more…)
IE7+ FF1+ SA1.3+ OP9.2+ CH2+
Full Full Full Full Full

Syntax

left: { length | percentage | auto | inherit } ;

Description

For absolutely positioned boxes, this property specifies how far the left margin edge of the box is offset to the right of the left padding edge of its containing block. However, should the value for left be auto (the initial value), the left margin edge of the box is positioned at the left content edge of its containing block.

Absolutely positioned boxes with both right and left having a value other than auto will effectively define the width of the element assuming that the element's width is auto. This may result in the element having no width at all if left and right positions occur at the same point or perhaps overlap. If the values for left,right and width are over-constrained and the direction property is ltr, right will be ignored. If direction is rtl, left will be ignored. Note that replaced elements with a width of auto will have the elements intrinsic width substituted and the preceding rules applied.

For relatively positioned boxes, this property specifies how far the left edge of the box is offset to the right of the position it would have had in the normal flow. If both right and left have a value other than auto, the offset is over-constrained. If the direction property is ltr, right will be ignored. If direction is rtl, left will be ignored.

Negative values will move the element in the opposite direction to positive values.

Example

This style rule makes the element with ID "nav" generate an absolutely positioned box at the top left-hand corner of its containing block:

#nav {
  position: absolute;
  top: 0;
  left: 0;
}

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Buggy Buggy Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full

Internet Explorer for Windows versions up to and including 6:

  • compute percentage values on the basis of the width of the parent block, rather than that of the containing block
  • don’t support the specification of both the position and the dimensions of an absolutely positioned element using top, right, bottom, and left together; they’ll use the last vertical and horizontal position specified, and need the dimensions to be specified using width and height

Internet Explorer for Windows versions up to and including 7 don’t support the value inherit.

Opera Versions up to and including 10 incorrectly ignore right in an over-constrained situation when direction has the value rtl .

User-contributed notes

Related Products