left

Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS2
Default value auto
Inherited No
Applied To all elements
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/visuren.html#propdef-left

Description
This parameter defines distance for the positioned element from a left edge of a parental element, not including a space, a field and framework width to a left edge of an affiliated element (fig. 1). Readout of coordinates depends on parameter position value. If its argument is equal absolute, window of a browser is as the parent and element position is defined from its left border. In case of value relative, the argument left is counted from a left border of an element starting position.


Syntax

left: denotation | percent | auto

Arguments
Any length units accepted in CSS are acecepted as values— for example, pixels (px), inches (in), points (pt), etc. Parameter denotation left can be negative, imposing of different elements against each other are possible in this case. At the value task in percentage element position is calculated depending on width of a parental element. The argument auto does not change element position.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>left</title>
  <style type="text/css">
   .layer1 {
    position: absolute; /* Absolute positioning */
    left: 20px; /* Location from the left edge */
    background: #fc3; /* Background color */
    margin: 7px; /* Indents around the element */
   }
   .layer2 {
    position: relative; /* Ralative positioning */
    left: -12px; /* Location from the left edge */
    top: 13px; /* Location from the top edge */
    border: 1px solid black; /* Frame parameters */
    padding: 5px; /* Areas around the text */
    margin: 7px; /* Indents around the element */
   }
  </style>
 </head> 
 <body> 
 
  <div class="layer1">
   <div class="layer2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
    nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
    volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution 
    ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
   </div>
  </div> 
 
 </body>
</html>

The result of this example is shown on the figure 2


Object model

[window.]document.getElementById("elementID").style.left