CSS Why left rule is given precedence over right rule when there’s a width?

Question

I have this CSS code:

#div1{
 height:200px;
 width:200px;
 background-color:red;
 position:absolute;
 right:30px !important; 
 left:0px;
 }

Answer 1

Having done some more research, the following will answer your question: http://www.w3.org/TR/css3-positioning/#abs-non-replaced-width

If all three of ‘left’, ‘width’, and ‘right’ are ‘auto’: First set any ‘auto’ values for ‘margin-left’ and ‘margin-right’ to ‘0’. Then, if the ‘direction’ property of the element establishing the static-position containing block is ‘ltr’ set ‘left’ to the static position and apply rule number three below; otherwise, set ‘right’ to the static-position and apply rule number one below.

If none of the three is ‘auto’: If both ‘margin-left’ and ‘margin-right’ are ‘auto’, solve the equation under the extra constraint that the two margins get equal values, unless this would make them negative, in which case when direction of the containing block is ‘ltr’ (‘rtl’), set ‘margin-left’ (‘margin-right’) to ‘0’ and solve for ‘margin-right’ (‘margin-left’). If one of ‘margin-left’ or ‘margin-right’ is ‘auto’, solve the equation for that value. If the values are over-constrained, ignore the value for ‘left’ (in case the ‘direction’ property of the containing block is ‘rtl’) or ‘right’ (in case ‘direction’ is ‘ltr’) and solve for that value.

Otherwise, set ‘auto’ values for ‘margin-left’ and ‘margin-right’ to ‘0’, and pick one of the following six rules that apply.

If ‘left’ and ‘width’ are ‘auto’ and ‘right’ is not ‘auto’, then the width is shrink-to-fit. Then solve for ‘left’.

If ‘left’ and ‘right’ are ‘auto’ and ‘width’ is not ‘auto’, then if the ‘direction’ property of the element establishing the static-position containing block is ‘ltr’ set ‘left’ to the static-position, otherwise set ‘right’ to the static-position. Then solve for ‘left’ (if ‘direction is ’‘rtl’‘) or ’right' (if ‘direction’ is ‘ltr’).

If ‘width’ and ‘right’ are ‘auto’ and ‘left’ is not ‘auto’, then the width is shrink-to-fit. Then solve for ‘right’.

If ‘left’ is ‘auto’, ‘width’ and ‘right’ are not ‘auto’, then solve for ‘left’.

If ‘width’ is ‘auto’, ‘left’ and ‘right’ are not ‘auto’, then solve for ‘width’.

If ‘right’ is ‘auto’, ‘left’ and ‘width’ are not ‘auto’, then solve for ‘right’.

Answer 2

Programming/Coding is all about doing things logically and making life easy.
To answer your question in a simple way, I would say that - You might be thinking that right:30px; should override left:0; deu to specificity and cascading rule, right? But not here, cascading happens when your both property are same. So, if you write:

width: 30px;
width: 50px !important;

width: 50px is going to get applied.

But in your case, it's left vs right. Not the same property. So, when CSS encounters both of these values, it thinks logically and apply the values. Because if you wanted the element to position just 30px left, you could have written left: 30px; and if you wanted the element to position just 30px right, you could have written right: 30px; but not both the values in either of the case.

I think you got my point and hope that helps clear your confusion. :)

Answer 3

In absolute position rules:

• right = -left
• top = -bottom

Answer 4

Just to show that the browser is w3c compliant:

If the values are over-constrained, ignore the value for ‘left’ (in case the ‘direction’ property of the containing block is ‘rtl’) or ‘right’ (in case ‘direction’ is ‘ltr’) and solve for that value.

So, if we set direction right to left

body  {
    direction: rtl;
}

#div1{
    height:200px;
    width:200px;
    background-color:red;
    position:absolute;
    right:30px; 
    left:0px;
}

Now left is ignored:

fiddle

Answer 5

right:30px !important

can only override another right rule. It can do nothing for your left rule.

As long as you don't have other right rule, your !important has absolutely no effect. It's just used to increase the specificity of the rule, it isn't a kind of hint for the engine on how to deal with various contradictory rules. Once the rules to apply are computed, the role of !important is finished.