css to properly align text right to left in a block

Question

I have been trying to format arabic text direction in a block from right to left using the following css:

.MatchingV1_1 { max-width: 100%; float: left; text-align: right; direction: rtl; }

but the result is that if the line does not wrap within the block (because it is just a few words), it is then aligned to the left. If the line wraps, it is aligned to the right.

Any suggestions to "concur" this problem?
Thanks in advance..

Answer 1

Wrap a div over it. DEMO*

<div class="MatchingV1_1">أَبْجَدِيَّة عَرَبِيَّة</div>

.MatchingV1_1 {
    direction: rtl;
}

Answer 2

Remove float property or add float:right in css

DEMO

HTML

<div class="MatchingV1_1">Lorem ipsum</div>
<div class="MatchingV1_2">Lorem ipsum</div>

CSS

.MatchingV1_1 {
    max-width: 100%;
    /*float: left;*/
    text-align: right;
    direction: rtl;
}
.MatchingV1_2 {
    max-width: 100%;
    float: right;
    text-align: right;
    direction: rtl;
}

Answer 3

It's because your container div does not have a width:

.MatchingV1_1 { max-width: 100%;
    float: left; 
    text-align: right; 
    direction: rtl; 
    width: 100%;
}

http://jsfiddle.net/maysamsh/KwLWm/