CSS left

The CSS left property is used to define the horizontal position of an element, from left edge. This property only effects on positioned element. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .a{position: relative; width: 220px; height: 120px; border: 2px solid red;}
      .b{position: absolute; left: 20px; color: blue;}
   </style>
</head>
<body>

   <div class="a">
      <div class="b">fresherearth</div>
   </div>

</body>
</html>

Output

fresherearth

In above example, the left: 20px moves the element to right from the left edge.

Note - The position property defines the position category of an element.

CSS left Syntax

The syntax of left property in CSS, is:

left: x;

The value of x should be any of the following:

Length - Used to move an element by some custom length like 12px, 2cm etc. from left edge
auto - Used to allow browser to define the left position of an element automatically. This is the default value
initial - Used to use the default value
inherit - Used to use the value inherited by the parent element

CSS left Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .a{position: fixed; background-color: red; color: whitesmoke;
         left: 30px; padding: 8px;}
      .b{position: relative; width: 260px; height: 220px;
         background-color: blue; color: whitesmoke;
         left: 60px; top: 60px; padding: 8px;}
      .c{position: absolute; background-color: green; color: whitesmoke;
         left: 100px; padding: 8px;}
   </style>
</head>
<body>

   <div class="a">position: fixed; left: 30px</div>
   <div class="b">position: relative; left: 60px; top: 60px
      <div class="c">position: absolute; left: 100px</div>
   </div>

</body>
</html>

The output of above example, is shown in the snapshot given below:

Note - Giving negative value to the left property will move an element to left from left edge. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .a{position: relative; width: 260px; height: 120px; padding: 8px;
         background-color: gray; color: whitesmoke;}
      .x, .y{position: absolute; background-color: green;
         color: whitesmoke; padding: 8px;}
      .x{left: 20px;}
      .y{left: -20px;}
   </style>
</head>
<body>

   <h2>left: 20px</h2>
   <div class="a">
      <div class="x">position: absolute; left: 20px</div>
   </div>

   <h2>left: -20px</h2>
   <div class="a">
      <div class="y">position: absolute; left: -20px;</div>
   </div>

</body>
</html>

Output

left: 20px

position: absolute; left: 20px

left: -20px

position: absolute; left: -20px;

CSS Online Test

« Previous Tutorial Next Tutorial »