Skip to: content, navigation

by Tommy Olsson and Paul O’Brien

left (CSS property)

Browser support full matrix
IE7+ FF1+ Saf1.3+ Op9.2+
Full Full Full Full
Spec
Inherited Initial Version
No auto CSS2

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;
}

Try it yourself!View all demos

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.

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.

Compatibility

IE5.5Buggy
6.0Buggy
7.0Full
Firefox1.0Full
1.5Full
2.0Full
Safari1.3Full
2.0Full
3.0Full
Opera9.2Full
9.5Full

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.

User-contributed notes

There are no comments yet.

Add a note

To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.

Related Products

The Principles of Beautiful Web Design

Best Seller!

You don’t need to go to Art School to design great looking web sites!

Book Cover: The Principles of Beautiful Web Design

Download the FREE sample chapters