CODEWITHSUNDEEP
csspositioning
john-charles
john-charles

Reputation: 1469

Why does setting the `right` CSS attribute push an element to the left?

I have a very basic page with two elements, an outer green box, and inner blue box. I am confused as to why setting the right attribute on the inner box would move it to the left? Furthermore I am confused as to why right:0 would not align the boxes right edge to the right edge of the parent box? Here is my short example page...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <style type="text/css">
            #outer {
                background-color : green;
                width : 500px;
                height : 500px;
            }

            #inner {
                position : relative;
                background-color : blue;
                height : 400px;
                width : 400px;
                top : 10px;
                right : 20px;
            }
        </style>
    </head>
    <body>
        <div id="outer">
            <div id="inner">


            </div>

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

Upvotes: 2

Views: 4263

Answers (4)

Sampson
Sampson

Reputation: 268344

Setting the right property indicates how far from the right edge your element should be. Think of it as setting a new point of origin. By default, your origination is the top-left of the containing element. You can use bottom and right to change this.

When your element is positioned relative, its right-origin will be the natural location of its right-edge. This is why your element is shifted to the left 20px. If you changed the position value to absolute, the new point of origin will be the right edge of the nearest positioned container, or the viewport itself. In your case, it's the viewport.

For more, see http://www.w3.org/wiki/CSS/Properties/right

Upvotes: 4

Phrogz
Phrogz

Reputation: 303224

Furthermore I am confused as to why right:0 would not align the boxes right edge to the right edge of the parent box?

You need to set the parent box to position:relative (or absolute, or fixed) if you want it to establish a new coordinate system for all descendants. Otherwise the inner box is still being positioned relative to the body.

For example, compare these two demos:
position:relative outer
position:static outer

Upvotes: 1

Dean_Wilson
Dean_Wilson

Reputation: 190

Setting right is how much you want to push it from the right

Upvotes: 0

Taz
Taz

Reputation: 1303

Throw in a

float:right;

to your inner div and all will work as you expect it.

Upvotes: 1

Related Questions