totn CSS

CSS: left property

This CSS tutorial explains how to use the CSS property called left with syntax and examples.

Description

The CSS left property defines the left position of an element in combination with the position property.

Syntax

The syntax for the left CSS property is:

left: value;

Parameters or Arguments

value

The left value when positioning an element using the position property. It can be one of the following:

Value Description
fixed Fixed value expressed in pixels, em's, etc.
div { position: relative; left: 10px; }
div { position: absolute; left: 5em; }
percentage Percentage value
div { position: fixed; left: 15%; }
auto This is the default behavior
div { position: relative; left: auto; }
inherit Indicates that the element will inherit the left from its parent element
div { position: inherit; }

Note

  • When the value is provided as a percentage, it is relative to the width of the containing block.
  • If the position property is set to relative, absolute, or fixed, you can set the top, right, bottom, and left properties.
  • If the position property is set to static, he top, right, bottom, and left properties do not apply.
  • See also the position, top, right, and bottom properties.

Browser Compatibility

The CSS left property has basic support with the following browsers:

  • Chrome
  • Firefox (Gecko)
  • Internet Explorer (IE)
    • static, relative, absolute: IE 4
    • fixed: IE 7
  • Opera
  • Safari (WebKit)

Example

We will discuss the left property below, exploring examples of how to use this property in CSS.

Relative Position

Let's look at an example where we set the position property to relative and set a value for the left property.

The CSS would look like this:

.totn_container { background: red; padding: 10px; width: 360px; height: 40px; }

.totn1, .totn2, .totn3 { float: left; background: lightgreen; border: 2px solid blue; width: 115px; }

.totn2 { position: relative; top: 20px; left: 15px; }

The HTML would look like this:

<div class="totn_container">
  <div class="totn1">Div 1 - techonthenet.com</div>
  <div class="totn2">Div 2 - techonthenet.com</div>
  <div class="totn3">Div 3 - techonthenet.com</div>
</div>

The result would look like this:

CSS

In this CSS position example, we have set the totn2 class to have a position of relative and the top property is set to 20px and the left property is set to 15px. What this means is that the div element (identified by the totn2 class) will be moved down by 20px and moved left by 15px relative to where it would have been positioned in a normal layout.

Absolute Position

Let's take a look at what would happen if we tried setting the position property to absolute for the second div and set a value for the left property.

The CSS would look like this:

.totn_container { background: red; padding: 10px; width: 360px; height: 40px; }

.totn1, .totn2, .totn3 { float: left; background: lightgreen; border: 2px solid blue; width: 115px; }

.totn2 { position: absolute; top: 20px; left: 15px; }

The HTML would look like this:

<div class="totn_container">
  <div class="totn1">Div 1 - techonthenet.com</div>
  <div class="totn2">Div 2 - techonthenet.com</div>
  <div class="totn3">Div 3 - techonthenet.com</div>
</div>

The result would look like this:

CSS

In this CSS position example, we have set the totn2 class to have a position of absolute and the top property is set to 20px and the left property is set to 15px. What this means is that the div element (identified by the totn2 class) will be moved within its parent container to an absolute position of 20px from the top of the container and 15px from the left of the container.

So in this example, the second div in effect is positioned on top of the first div (identified by the totn1 class).

Fixed Position

Let's take a look at what would happen if we tried setting the position property to fixed for the second div and set a value for the left property.

The CSS would look like this:

.totn_container { background: red; padding: 10px; width: 360px; height: 40px; }

.totn1, .totn2, .totn3 { float: left; background: lightgreen; border: 2px solid blue; width: 115px; }

.totn2 { position: fixed; top: 20px; left: 15px; }

The HTML would look like this:

<div class="totn_container">
  <div class="totn1">Div 1 - techonthenet.com</div>
  <div class="totn2">Div 2 - techonthenet.com</div>
  <div class="totn3">Div 3 - techonthenet.com</div>
</div>

The result would look like this:

CSS

In this CSS position example, we have set the totn2 class to have a position of fixed and the top property is set to 20px and the left property is set to 15px. What this means is that the div element (identified by the totn2 class) will be moved within the screen's viewport to a fixed position of 20px from the top of the viewport and 15px from the left of the viewport.

It looks very similar to the result from the absolute position example. The only exception is that when we scroll with the fixed position example, the second div (identified by the totn2 class) will remain fixed within the screen's viewport and will not scroll off of the screen.

Share on: