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 to float images left and right without text wraps

    How do you align the vertical center of text to the vertical center of an image?

    How can I map 5 distinct zone on a draggable-vertical element?

    How to prevent CSS table row expanding to parent height

    CSS selector hierarchy? How to reverse engineer to get the styling?

    HTML table show last column using media queries

    Contact page Design how to add Bootstrap

    How to enable links if a parent element uses a fullscreen pseudo-element?

    How to make the Div fixed at a particular scroll location?

    How much overflow in a DOM element

    How can I fix Buttongroup Dropdowntoggle-Buttons in Bootstrap?

    How to display 20 columns in html design

    How can I conform to a 4 nest rule?

    How do I stop a CSS layout from distorting when zooming in/out?

    How to expand toggle sidebar more

    How to use HTML-CSS on outputting data conditionally?

    how to remove element.style in css

    How to use same css for separate media query conditions

    background image of div element can't show in php file

    how to clip text in css like gmail does to emails subject listings

    How to change the border of an element when selected?

    How do I configure syntax highlighting for LESS in coda?

    how to make input and select look nice beside eachother with custom height?

    How to override GWT obfuscated style for DataGrid header

    How to check if style ID contains certain css selectors?

    Twitter Bootstrap with responsive design — How to style own, non-framework elements [closed]

    how to increase the size of background image to cover all backgroung (but no repetition) [closed]

    how to make css for work for different mobile sites

    How do I provide navigation options on the sides of a centered logo?

    How to center without losing it's function