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


Tags: css,css3,responsive-design,media-queries

Problem :

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?



Solution :

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

    CSS Howto..

    How can I use Modernizr to get border-radius working in IE8?

    How can I change the opacity of a certain text by clicking another div?

    How do change the size of input box?

    How to use CSS position(relative, absolute) with percentage (height, width) dimension? [closed]

    CSS How to hide current child menu items when hovering over parent's sibling items without javascript

    How to build a complex table by using CSS?

    same button for show/hide in jquery

    How to use CSS to make this works on retina screen?

    How can I give a settimeout to a div on first click but not on second click?

    Gradient css borders not showing in internet explorer an firefox

    How to change the body background for three different div-s

    How to fix the Wordpress (Twenty Eleven) CSS Menu Alignment?

    How to display components horizontally with CSS

    How to make compatibale a css design for all the browsers?

    How to think to get all content inline (HTML & CSS)

    how to keep my slider horizontally centered?

    How to check if a particular CSS value exists

    how to make moving spinner's edges rounded css

    How to fluid images when resize window?

    How to position some text?

    CSS/HTML - How do I get text to go behind an image inside a div

    How to use JavaScript to Alter CSS for Multiple Elements

    How can I control the width of a
    with display:table; with a

    element inside with display:table-cell

    How float divs inside a td

    How to manipulate the CSS at runtime

    How to display .toggle or .Animate to all connected browser sessions using Meteor

    how to make vertical progress path using css

    How to filter and show only applied CSS in Chrome Developer Tools (like Firebug in Firefox)

    How to align body of the webpage to center?

    How to remove space after a colon in CSS with Sublime Text 3?