The left property specifies the distance from the left of the element to the default location of the element (when position=relative) or the distance between the left of the element and the left of the container (when position=absolute). This can be specified as a percentage, as a length, or 'auto'.
Let's take a look at two examples:
Example 1: CSS Code
|
div {
background-color:#FF00FF;
width:500px;
height:60px;
}
p {
position:relative;
left:30px;
}
|
The HTML code,
<div>
<p>This text is 30 pixels from the left of the box.
</div>
|
renders
This text is 30 pixels from the left of the box.
Without using the left property, the text would have started right at the left edge of the pink container. Applying {position:relative; left:30px;} shifts the text away from the default location by 30px.
Example 2: CSS Code
|
div {
background-color:#FF00FF;
width:500px;
height:60px;
}
p {
position:relative;
left:-10px;
}
|
The HTML code,
<div>
<p>This text is 10% from the left of the box.
</div>
|
renders
This text is 10% from the left of the box.
In the above example, the text is 10% (or 50px) away from the default location.
Next: CSS Right
Link to this page: If you find this page useful, we encourage you to link to this page. Simply copy and paste the code below to your website, blog, or profile.
More Tutorials: SQL PHP HTML
Copyright 2007-2009 1keydata.com All Rights Reserved. Privacy Policy
|