css - firefox dosen't support div width -

css - firefox dosen't support div width -

i have problem firefox 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 happened?! tnx

you can't have pixel based padding when using % based sizing. ie doesn't right. if closely (and alter size of window), there white space left of first div. when add together padding, adds size of div itself, have div of 33.3% width + 20px (left-right). ie interprets incorrectly , gives seemingly usable result. firefox interprets "as is" , floated div.

what need apply padding sub-divs within 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 content formatting style outer_div , place in style sub-div //--> <div class="textformattingclass"> text! </div> </div> <div class="outer_div" dir="rtl"> <div class="textformattingclass"> text! </div> </div> <div class="outer_div" dir="rtl"> <div class="textformattingclass"> text! </div> </div> </div>

css html cross-browser