When the left and right offset properties are applied to the same element, width is implied. : left « CSS « HTML / CSS






  1. HTML / CSS
  2. CSS
  3. left

When the left and right offset properties are applied to the same element, width is implied.

   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
    <head>
        <title>Opposing Offset Properties</title>
<style type='text/css'>
body {
    font: 12px sans-serif;
    background: lightyellow;
}
div#offset-four {
    background: yellow;
    border: 1px solid rgb(128, 128, 128);
    position: absolute;
    top: 20px;
    right: 20px;
    bottom: 20px;
    left: 20px;
}
p {
    margin: 0;
    padding: 5px;
    border: 1px solid black;
}
p#offset-x {
    position: absolute;
    bottom: 5px;
    left: 5px;
    right: 123px;
    background: gold;
}

</style>


    </head>
    <body>
        <div id='offset-four'>
            <p id='offset-x'>
                When the left and right offset properties are applied to the same
                element, width is implied.
            </p>

        </div>
    </body>
</html>








Related examples in the same category

1.'left' Example
2.Top offset and left offset
3.left aligns the left side of an absolute element
4.width, left and right are auto
5.use 'left' to offset the left side of an element from the left side of its reference position.
6.Positive values offset to the right and negative to the left.
7.width is auto, both left and right are some other value
8.Relative offset float
9.Relative sized offset
10.Absolute Outside its parent on the Bottom Right with 100% left
11.Stacking order of three classes used in div elements in the body
12.Fixed block with width and height to left and bottom
13.Top-left Absolute positioned element
14.When all four offset properties are specified on the same element both width and height are implied.