HTML and CSS Reference
In-Depth Information
the height of the content itself may be 200px but the overall canvas space consumed
is 300px to account for the borders and padding:
20
px
30
px
30
px
20
px
200 px
300 px
left
This property defines the
x
(horizontal) coordinate for a positioned element, relative to the
left side of the containing element or browser window.
Syntax
left:
length
|
percentage
| auto | inherit
where
length
can be specified in the standard units of length, such as inches (
in
) and so on,
but is nearly always set in pixels (
px
), and
percentage
corresponds to a percentage of the
containing object's dimensions. The default value,
auto
, lets this property function as placing
the object where it normally would fall in the document flow. For relative position, this will
likely be treated as 0. For absolute and fixed positioning, it will calculate a value based upon
other set properties, particularly
right
.
Examples
#div1 {position: absolute; left: 100px; top: 150px;}
#div2 {position: absolute; left: 50%; top: 30%;}
#div3 {position: absolute; left: auto; right: 500px; bottom: 5px; top: auto;}
/* left will evaluate to a position calculated off the right position */
#navBar {position: fixed; left: 0; top: 0;}
Compatibility
CSS 2, 3
IE 4+
Netscape 4+, Firefox 1+
Opera 6+, Safari 1+
