Float in div tag dosen't Work in Firefox

Question

In IE show correctly but in FF Doesn't Show correctly:

<div class="main_div" dir="rtl">
    <div class="outer_div" dir="rtl">
        <div class="textformatting" dir="rtl">
            <div class="inner_div"> text </div>
            <div class="inner_div"> Image </div>
        </div>
    </div>
    <div class="outer_div" dir="rtl">
        <div class="textformatting" dir="rtl">
            <div class="inner_div"> text </div>
            <div class="inner_div"> Image </div>
        </div>
    </div>
    <div class="outer_div" dir="rtl">
        <div class="textformatting" dir="rtl">
            <div class="inner_div"> text </div>
            <div class="inner_div"> Image </div>
        </div>
    </div>
</div>

=======================

body{
    margin: 0px;
    padding: 0px;
}

div.main_div{
    border: dotted; 
    border-width: thin;
    padding-bottom: 10px;
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    background: #ffffaa;
    border-color: #FFCC66;
    width: 100%;
    float: right;
}

div.outer_div{
    float: right;
    width:33%;
}

div.textformatting{
    float: right; 
    padding-bottom : 5px;
    padding-top  : 5px;
    padding-left: 10px;
    padding-right: 10px;
    border: dashed;
    border-width:thin  
}

div.inner_div{
    float: right;
    width: 50%;
    border: dotted;
    border-width: thin;
}

Float in "Inner_div" doesn't Work!