CSS right to left direction & floating elements

direction:rtl

When developing a website for Arabic one of the most common questions is how to get it work with a reverse direction. Actually there is the CSS property direction:

.my-class {
    direction:rtl;
}

which makes the page right aligned.

Floating elements …

However sometimes there are elements on the page which are absolutely positioned and the direction property doesn’t do the job. The solution is something like combining the two settings. Both direction and float. So something like:

.my-class {
    float:left;
}

becomes something like:

.my-class {
    float:right;
    direction:rtl;
}

and of course if you’ve something like margin-left it should become margin-right!

One thought on “CSS right to left direction & floating elements

Leave a Reply

Your email address will not be published. Required fields are marked *