How to remove Left property when position: absolute?

css, css-position

Solution

left:auto;

This will default the `left` back to the browser default.

So if you have your Markup/CSS as:

<div class="myClass"></div>

.myClass
{
  position:absolute;
  left:0;
}

When setting RTL, you could change to:

<div class="myClass rtl"></div>

.myClass
{
  position:absolute;
  left:0;
}
.myClass.rtl
{
  left:auto;
  right:0;
}

Problem

I'm overriding the site CSS to an RTL version when specific language is chosen. I have an element which has to have absolute positioning. In the LTR version, I do `left: 0px;` and it's aligned to the left; in the RTL version I want to do the opposite with `right`, but the `left` property isn't overridden so it still stays to the left. - I've tried hacking with `!important`, but that didn't work. - I've tried setting `left: none`, but that didn't work. How can I either set it to none or remove it completely while overriding?

Original source