title: How do I absolute position a div from left to the right using media queries?
body: <p>Im having problems positioning a div to the right using media queries. </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="left"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>body,html { height:100%; }
  
  .container {
    width:1000px;
    height:100%;
    background:#eee;
    position:relative;
  }
  
  .left {
    height:100%;
    width:200px;
    background:orange;
    position:absolute;
    left:0;
  }
  
  @media only screen and (max-width: 700px) {
    .left {
      position:absolute !important;
      right:0 !important;
     }
   }
  </code></pre>
  
  <p>The left div is absolutely positioned to the left. I want to absolutely position that same div to the right when my media query is triggered at 700px width.</p>
  
  <p>The problem is that it wont do it! I tried using !important. I tried to reiterate the position in the media query. NOTHING! </p>
  
  <p>The weird part is that if I start off with the div absolutely positioned to the right , and with media queries, absolutely position the div to the left. IT WORKS! 
  What? Why? </p>
  
  <p><strong>DIV absolutely positioned to the left, with media query to bring the DIV to the right.<br>
  DOESNT WORK</strong></p>
  
  <p><a href="http://jsfiddle.net/zfdmmyaz/" rel="nofollow">http://jsfiddle.net/zfdmmyaz/</a></p>
  
  <p><strong>DIV absolutely positioned to the right, with media query to bring the DIV to the left.<br>
  THIS WORKS</strong></p>
  
  <p><a href="http://jsfiddle.net/md07a02t/" rel="nofollow">http://jsfiddle.net/md07a02t/</a></p>
  
  <p>How do I get this to work? How can I get my absolutely left positioned div to absolutely position itself all the way to the right when media query is triggered?</p>