How to remove Left property when position: absolute?

Question

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?

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