How to remove Left property when position: absolute?

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?

Solution 1:

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

Solution 2:

In the future one would use left: unset; for unsetting the value of left.

As of today 4 nov 2014 unset is only supported in Firefox.

Read more about unset in MDN.

My guess is we'll be able to use it around year 2022 when IE 11 is properly phased out.

Solution 3:

left: initial

This will also set left back to the browser default.

But important to know property: initial is not supported in IE.