How do I absolute position a div from left to the right using media queries?

Question

Im having problems positioning a div to the right using media queries.

HTML

<div class="container">
  <div class="left"></div>
</div>

CSS

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;
   }
 }

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.

The problem is that it wont do it! I tried using !important. I tried to reiterate the position in the media query. NOTHING!

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?

DIV absolutely positioned to the left, with media query to bring the DIV to the right.
DOESNT WORK

http://jsfiddle.net/zfdmmyaz/

DIV absolutely positioned to the right, with media query to bring the DIV to the left.
THIS WORKS

http://jsfiddle.net/md07a02t/

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?

Answer 1

Use float instead of left. Also, you don't need to make the .left div absolute since it will be absolutely positioned to it's relative container.

HTML

<div class="container">
  <div class="left">Content</div>
  <div class="clear"></div>
</div>

CSS

body,html { height:100%; }

.container {
  width:1000px;
  height:100%;
  background-color:#eee;
  position:relative;
  border: 1px #000000 solid;
}

.left {
  height:100%;
  width:200px;
  background-color:orange;
  float: left;
}

.clear {
    clear:both;
}

@media only screen and (max-width: 700px) {
    .container {
        width:100%;
    }

    .left {
        float: right !important;
    }
 }

Answer 2

You need to reset the left value to auto, and then set the right value.

jsfiddle

@media only screen and (max-width: 700px) {
    .left {
        position: absolute;
        left: auto;
        right: 0;
        background: lime;
    }
}