Tillitsdone
down Scroll to discover
CSS Left Master Horizontal Positioning in Web Design
Learn how to use the CSS left property to control horizontal positioning of elements.

Explore length, percentage, auto, and global values available.
thumbnail

Introduction

The left CSS property is essential for web development and design. It helps you control the horizontal position of elements that have been positioned using the position property. This property is crucial for creating precise layouts and visually appealing designs.

Syntax

The syntax for the left property is simple:

left: value;

Value Types:

  1. Length Values:
    • Use specific units like pixels (px), ems (em), or centimeters (cm).
    left: 3px;
    left: 2.4em;
  2. Percentage Values:
    • Specify the position as a percentage of the containing block’s width.
    left: 10%;
  3. Keyword Value:
    • The auto keyword lets the browser determine the position.
    left: auto;
  4. Global Values:
    • Use keywords like initial, inherit, revert, revert-layer, and unset.
    left: inherit;
    left: initial;

Description

The behavior of the left property depends on how the element is positioned, which is determined by the position property. Here’s how it works with different positioning values:

Absolute Positioning

When position is absolute, the left property specifies the distance between the element’s left edge and the left edge of its containing block.

Relative Positioning

When position is relative, the left property specifies how far the element is moved to the right from its normal position.

Fixed Positioning

When position is fixed, the left property specifies the distance between the element’s left edge and the left edge of the viewport.

Sticky Positioning

When position is sticky, the left property is used to compute the sticky-constraint rectangle.

Static Positioning

When position is static, the left property has no effect.

Formal Definition

The left property has specific initial values, applicability, inheritance, and animation types:

Initial Value

  • Initial Value: auto
    • The default is auto, meaning the browser determines the horizontal position.

Applies To

  • Applies To: Positioned elements
    • Only works with elements that have been positioned using the position property.

Inherited

  • Inherited: No
    • The left property is not inherited from the parent element.

Percentages

  • Percentages: Refer to the width of the containing block
    • When using percentages, they are calculated based on the width of the containing block.

Computed Value

  • Computed Value:
    • If specified as a length, the computed value is the corresponding absolute length.
    • If specified as a percentage, the computed value is the specified percentage.
    • Otherwise, the computed value is auto.

Animation Type

  • Animation Type: Length, percentage, or calc()
    • The left property can be animated using length, percentage, or the calc() function.

Formal Syntax

The formal syntax of the left property is:

left: auto | <length-percentage>;

Components of the Syntax

  1. auto
    • Lets the browser determine the position.
    left: auto;
  2. <length-percentage>
    • Represents either a length value or a percentage value.
    left: 3px;
    left: 10%;

Examples

Here are some practical examples to illustrate how the left property works:

Positioning Elements

Example: Absolute Positioning

<div id="example_1">
<pre>
position: absolute;
left: 20px;
top: 20px;
</pre>
<p>The element is positioned 20 pixels from the left edge of its containing block.</p>
</div>

Example: Relative Positioning

<div id="example_2">
<pre>
position: relative;
top: 0;
right: 0;
</pre>
<p>The element is moved 20 pixels to the right from its normal position.</p>
</div>

Example: Relative Positioning with Float

<div id="example_3">
<pre>
float: right;
position: relative;
top: 20px;
left: 20px;
</pre>
<p>The element is moved 20 pixels to the right and floated to the right.</p>
</div>

Example: Absolute Positioning Inside a Relative Parent

<div id="example_4">
<pre>
position: relative;
left: 20px;
top: 20px;
</pre>
<p>The element is positioned 20 pixels from the left edge of its relative parent.</p>
</div>

Practical Use Cases

Example: Absolute Positioning

<div id="absolute-example">
<p>This div is absolutely positioned 20px from the left edge of its containing block.</p>
</div>
#absolute-example {
position: absolute;
left: 20px;
top: 20px;
width: 200px;
height: 100px;
background-color: #d8f5ff;
}

Example: Relative Positioning

<div id="relative-example">
<p>This div is relatively positioned 20px to the right from its normal position.</p>
</div>
#relative-example {
position: relative;
left: 20px;
width: 200px;
height: 100px;
background-color: #c1ffdb;
}

Example: Fixed Positioning

<div id="fixed-example">
<p>This div is fixed positioned 20px from the left edge of the viewport.</p>
</div>
#fixed-example {
position: fixed;
left: 20px;
top: 20px;
width: 200px;
height: 100px;
background-color: #ffd7c2;
}

Example: Sticky Positioning

<div id="sticky-example">
<p>This div is sticky positioned 20px from the left edge of the viewport when scrolled.</p>
</div>
#sticky-example {
position: sticky;
left: 20px;
top: 20px;
width: 200px;
height: 100px;
background-color: #ffc7e4;
}

HTML

<div id="wrap">
<div id="example_1">
<pre>
position: absolute;
left: 20px;
top: 20px;
</pre>
<p>The only containing element for this div is the main window, so it positions itself in relation to it.</p>
</div>
<div id="example_2">
<pre>
position: relative;
top: 0;
right: 0;
</pre>
<p>Relative position in relation to its siblings.</p>
</div>
<div id="example_3">
<pre>
float: right;
position: relative;
top: 20px;
left: 20px;
</pre>
<p>Relative to its sibling div above, but removed from flow of content.</p>
<div id="example_4">
<pre>
position: absolute;
bottom: 10px;
right: 20px;
</pre>
<p>Absolute position inside of a parent with relative position</p>
</div>
<div id="example_5">
<pre>
position: absolute;
right: 0;
left: 0;
top: 200px;
</pre>
<p>Absolute position with both left and right declared</p>
</div>
</div>
</div>

CSS

#wrap {
width: 700px;
margin: 0 auto;
background: #5c5c5c;
}
pre {
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
word-wrap: break-word;
}
.example {
width: 200px;
height: 100px;
background-color: #d8f5ff;
margin: 10px;
}
#example_1 {
position: absolute;
left: 20px;
top: 20px;
}
#example_2 {
position: relative;
right: 0;
}
#example_3 {
position: relative;
top: 20px;
left: 20px;
}
#example_4 {
position: absolute;
bottom: 10px;
right: 20px;
}
#example_5 {
position: absolute;
right: 0;
left: 0;
top: 200px;
}

Specifications and Browser Compatibility

The left property is formally defined in the CSS specifications, ensuring consistent usage across different browsers and platforms.

Key Specifications

  • Initial Value: auto
  • Applies To: Positioned elements (absolute, relative, fixed, sticky)
  • Inherited: No
  • Percentages: Calculated based on the width of the containing block
  • Computed Value: Absolute length, percentage, or auto
  • Animation Type: Length, percentage, or calc()

Browser Compatibility

The left property is widely supported across all major browsers:

  • Google Chrome: Supported since version 1.0
  • Microsoft Edge: Supported since version 12.0
  • Internet Explorer: Supported since version 5.5
  • Firefox: Supported since version 1.0
  • Safari: Supported since version 1.0
  • Opera: Supported since version 5.0

See Also

For further reading, check out these resources:

These resources will help you master the left property and enhance your web development skills. Happy coding!

Get in Touch
Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.
Contact Information
rick@tillitsdone.com+66824564755
Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.
Address
9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand
Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.
Social media
Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.
We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.
Frequently Asked Questions
Explore frequently asked questions about our products and services.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.