مشکل div با Firefox

سلام،
من این جا دو تا Div درون همدیگه دارم که تو IE به راحتی کار می کنند ولی با Firefox مشکل دارن:

<div id="outer_div" dir="rtl">
<div id="outer_div" dir="rtl">
Some text!
</div>
<div id="outer_div" dir="rtl">
Some text!
</div>
<div id="outer_div" dir="rtl">
Some text!
</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;
padding-bottom : 5px;
padding-top : 5px;
padding-left: 10px;
padding-right: 10px;
width: 33.3%;
border: dashed;
border-width:thin
}

به نظر اساتید مشکل از کجاست؟! ممنون

اول از همه برای ارسال اینچنین سوالاتی کدتو رو بزارید داخل تگ html => [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]

وقتی شما به صورت درصد با DIV کار میکنید باید فضارو بین DIV های دیگه تقسیم کنید
فضایی که شما در نظر گرفتید قابل قبوله ولی به خاطر padding هایی که دادین (واسه DIV های داخلی) باعث شدن یه فضایی هم اونا بگیرن
یه بار padding-right و padding-left رو 0 قرار بدید همه چی اوکی میشه
در ضمن واسه DIV اصلی که گذاشتید ID رو main_div بزارید
موفق باشید

ممنونم ازت.. یه سری تغییرات اعمال کردم ولی بازم به مشکلاتی برخوردم، این کدمه:>
[HTML]
<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[/HTML]

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

[HTML]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;
}[/HTML]

بازم IE درست نمایش می ده ولی FF همون مشکل Float رو داره، ممنون..

دوست عزیز border هم چند درصد فضا اشغال میکنه
شما این دو خط رو از استایل inner_div حذف کنید
[HTML] border: dotted; border-width: thin; [/HTML]

اگر هم میخواهید از border استفاده کنید یه چند درصدی باید از width همون استایل کم کنید