firefox dosen't support div width

Question

I have a problem with Firefox to show this: (But IE show correctly)

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

Why this happened?! tnx

Answer 1

You're missing closing < /div > tag for #main_div

EDIT:

It looks like you want simple 3 column layout with columns same size. Like on this site: http://www.positioniseverything.net/sidepages/demo-213.html

And if that is not what you are looking for, check this: http://css-discuss.incutio.com/wiki/Three_Column_Layouts

Anyway, using tables to get perfect 33.3 columns is much easier...

Answer 2

You are missing the closing tag for the outer div, and also, no div should have the same ID on the page... You should be using the class attribute :)

Answer 3

You can't have pixel based padding when using % based sizing. Even IE doesn't get it right. If you look very closely (and change the size of the window), there is a white space to the left of your first div. When you add padding, it adds to the size of the div itself, so you have a div of 33.3% width + 20px (left-right). IE interprets this incorrectly and gives you a seemingly usable result. Firefox interprets this "as is" and you get the floated div.

What you need to do is apply padding to sub-divs inside your layout divs:

EDIT: Style Elements

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.3%; 
border: dashed;  
border-width:thin   
} 

div.textformattingclass{
padding: 5px 10px 5px 10px; 
}

HTML Elements

<div id="main_div" dir="rtl"> 
    <div class="outer_div" dir="rtl"> 

          <!-- remove all content formatting from the style for the outer_div
               and place it in a style for this sub-div //-->

          <div class="textformattingclass">
              Some text! 
          </div>
    </div> 
    <div class="outer_div" dir="rtl"> 
          <div class="textformattingclass">
              Some text! 
          </div>
    </div> 
    <div class="outer_div" dir="rtl"> 
          <div class="textformattingclass">
              Some text! 
          </div>
    </div> 
</div>