PUBLISHED ON: APRIL 12, 2021
CSS left Property
The left property in CSS is known to specify the horizontal position of the positioned element. This property has no effect on the non-positioned elements.
The effect of this property depends on how an element is positioned which means the value of the position property.
When both right and left values are defined, and the width constraints do not prevent it, the element gets stretched to satisfy both the values. In case the element is unable to satisfy both, then the position of the element is overspecified.
Syntax
left: length|percentage|auto|initial|inherit;
Example: CSS left Property
In the example below, we are using the left property to align our text according to the left property value specified by us. This means we are specifying the horizontal position of the positioned element.
We have given all the values and given different colors to our text in order to distinguish the text according to the different values.
<!DOCTYPE html>
<html>
<head>
<title>The left property in CSS</title>
<style type="text/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_1 {
width: 200px;
height: 200px;
position: absolute;
left: 20px;
top: 20px;
background-color: #D8F5FF;
}
#example_2 {
width: 200px;
height: 200px;
position: relative;
top: 0;
right: 0;
background-color: #C1FFDB;
}
#example_3 {
width: 600px;
height: 400px;
position: relative;
top: 20px;
left: 20px;
background-color: #FFD7C2;
}
#example_4 {
width:200px;
height:200px;
position:absolute;
bottom:10px;
right:20px;
background-color:#FFC7E4;
}
#example_5 {
position: absolute;
right: 0;
left: 0;
top: 100px;
background-color: #D7FFC2;
}
</style>
</head>
<body>
<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>
</body>
</html>
Output
Live Example
Here in this live example, you can easily test the live coding and execute the example using different values or edit the coding and create your own example.
Browser Compatibility
The term browser compatibility indicates the ability of a particular website to appear fully functional on several browsers, available in the market. This means that the HTML coding of the website and the scripts on that website must be compatible to run on the browsers. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
1 |
1 |
| Edge |
12 |
12 |
| Firefox |
1 |
1 |
| Internet Explorer |
5.5 |
5.5 |
| Opera |
5 |
5 |
| Safari |
1 |
1 |
| Webview Android |
1 |
1 |
| Chrome Android |
18 |
18 |
| Firefox Android |
4 |
4 |
| Opera Android |
14 |
14 |
| IOS Safari |
1 |
1 |
| Samsung Internet |
1.0 |
1.0 |
Conclusion
This property is applicable to the positioned elements. It is not an inherited property. The percentage values refer to the width of the containing block. The computed value for this property is specified as a length or the corresponding absolute length.
