left

  • Revision slug: CSS/left
  • Revision title: left
  • Revision id: 26451
  • Created:
  • Creator: BijuGC
  • Is current revision? No
  • Comment /* Examples */

Revision Content

{{template.CSSRef()}}

Summary

The left property specifies part of the position of positioned elements.

For absolutely positioned elements (those with {{template.Cssxref("position")}}: absolute or position: fixed), it specifies the distance between the left margin edge of the element and the left edge of its containing block.

  • {{template.Xref_cssinitial()}}: {{template.Cssxref("auto")}}
  • Applies to: positioned elements
  • {{template.Xref_cssinherited()}}: no
  • Percentages: refer to height of containing block
  • Media: {{template.Xref_cssvisual()}}
  • {{template.Xref_csscomputed()}}: absolute length, percentage, or auto

Syntax

left: <length> | <percentage> | auto | inherit ;

Values

{{template.Xref_csslength()}} 
A length, can be negative, zero, or positive.
{{template.Xref_csspercentage()}} 
A percentage of the containing block's width.

Examples

{{template.CSSRefExampleLink("left")}} {{template.Fixeg()}}

div { 
   position: absolute;
   left: 20px; 
   height: 200px;
   border: 1px solid #000;
}

Notes

Specifications

Browser compatibility

{{template.Fixbrowser()}}

Browser Lowest Version
Internet Explorer ?
Firefox 1
Netscape ?
Opera ?
Safari ?

See also

{{template.Cssxref("position")}}, {{template.Cssxref("top")}}, {{template.Cssxref("right")}}, {{template.Cssxref("bottom")}}

{{ wiki.languages( { "es": "es/CSS/left" } ) }}

Revision Source

<p> 
{{template.CSSRef()}}
</p>
<h3 name="Summary"> Summary </h3>
<p>The <code>left</code> property specifies part of the position of positioned elements.
</p><p>For absolutely positioned elements (those with {{template.Cssxref("position")}}<code>: absolute</code> or <code>position: fixed</code>), it specifies the distance between the left margin edge of the element and the left edge of its containing block.
</p>
<ul><li> {{template.Xref_cssinitial()}}: {{template.Cssxref("auto")}}
</li><li> Applies to: <a href="en/CSS/position">positioned elements</a>
</li><li> {{template.Xref_cssinherited()}}: no
</li><li> Percentages: refer to height of containing block
</li><li> Media: {{template.Xref_cssvisual()}}
</li><li> {{template.Xref_csscomputed()}}: absolute length, percentage, or auto
</li></ul>
<h3 name="Syntax"> Syntax </h3>
<pre class="eval">left: &lt;length&gt; | &lt;percentage&gt; | auto | inherit ;
</pre>
<h3 name="Values"> Values </h3>
<dl><dt> {{template.Xref_csslength()}} </dt><dd> A length, can be negative, zero, or positive.
</dd><dt> {{template.Xref_csspercentage()}} </dt><dd> A percentage of the containing block's width.
</dd></dl>
<h3 name="Examples"> Examples </h3>
<p>{{template.CSSRefExampleLink("left")}} {{template.Fixeg()}}
</p>
<pre class="eval">div { 
   position: absolute;
   left: 20px; 
   height: 200px;
   border: 1px solid #000;
}
</pre>
<h3 name="Notes"> Notes </h3>
<h3 name="Specifications"> Specifications </h3>
<ul><li> <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left">CSS 2.1</a>
</li><li> <a class="external" href="http://www.w3.org/Style/CSS/current-work#positioning">CSS 3</a>
</li></ul>
<h3 name="Browser_compatibility"> Browser compatibility </h3>
<p>{{template.Fixbrowser()}}
</p>
<table class="standard-table">
  <tbody><tr>
    <th>Browser</th>
    <th>Lowest Version</th>
  </tr>
  <tr>
    <td>Internet Explorer</td>
    <td>?</td>
  </tr>
  <tr>
    <td>Firefox</td>
    <td>1</td>
  </tr>
  <tr>
    <td>Netscape</td>
    <td>?</td>
  </tr>
  <tr>
    <td>Opera</td>
    <td>?</td>
  </tr>
  <tr>
    <td>Safari</td>
    <td>?</td>
  </tr>
</tbody></table>
<h3 name="See_also"> See also </h3>
<p>{{template.Cssxref("position")}}, {{template.Cssxref("top")}}, {{template.Cssxref("right")}}, {{template.Cssxref("bottom")}}
</p>
<div class="noinclude">
</div>
{{ wiki.languages( { "es": "es/CSS/left" } ) }}
Revert to this revision