title: CSS Why left rule is given precedence over right rule when there’s a width?
body: <p>I have this CSS code:</p>
  
  <pre><code>#div1{
   height:200px;
   width:200px;
   background-color:red;
   position:absolute;
   right:30px !important; 
   left:0px;
   }
  </code></pre>
  
  <p>I want to ask why <code>left:0px;</code> overrides <code>right:30px !important</code> and not the opposite. Or the one with <code>!mportant</code> should override the other, that sounds more logical to me.</p>
  
  <p>As PaulD.Waite pointed out  it’s more that the <code>left</code> and <code>width</code> rules override the <code>right</code> rule.</p>
  
  <p>So the real question is </p>
  
  <p><strong>Why left is given precedence over right when there’s a width?</strong></p>
  
  <p><a href="http://jsfiddle.net/bZ8zg/" rel="nofollow">FIDDLE</a></p>