css - firefox dosen't support div width -

I have a problem with Firefox to show: (but IE shows correctly)

  & lt; Div id = "main_div" dir = "rtl" & gt; & Lt; Div dir = "rtl" & gt; & Lt; Div class = "outer_div" dir = "rtl" & gt; Lesson! & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div dir = "rtl" & gt; & Lt; Div class = "outer_div" dir = "rtl" & gt; Lesson! & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div dir = "rtl" & gt; & Lt; Div class = "outer_div" dir = "rtl" & gt; Lesson! & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

====================================== < / P> body {margin: 0 px; Padding: 0 pixels; } Div.main_div {boundary: dotted; Threshold width: thin; Padding-down: 10px; Padding-top: 10px; Padding-left: 20px; Padding-right: 20px; Background: #ffffaa; Border color: #FFCC 66; Width: 100%; float right; } Div.outer_div {float: right; Padding-down: 5px; Padding-top: 5px; Padding-left: 10px; Padding-right: 10px; Width: 33.3%; Border: dashed; Border width: thin}

Why this happened ?! Tnx

You can not have pixel-based padding while using% sized sizing Even IE Not even right. If you look very closely (and change the window size), then there is a white spot on the left side of your first device when you add padding, then it adds itself to the size of the div, so you have 33.3% Width + 20px (left side) is a device. IE interprets it incorrectly and gives you a fairly useful result that Firefox interprets this "as is" and you get the initial divas.

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

Edit: Style Elements

Body { Margin: 0 px; Padding: 0 pixels; } Div.main_div {boundary: dotted; Threshold width: thin; Padding-down: 10px; Padding-top: 10px; Padding-left: 20px; Padding-right: 20px; Background: #ffffaa; Border color: #FFCC 66; Width: 100%; float right; } Div.outer_div {float: right; Width: 33.3%; Border: dashed; Threshold width: thin} div.textformattingclass {padding: 5px 10px 5px 10px; }

HTML element

  & lt; Div id = "main_div" dir = "rtl" & gt; & Lt; Div class = "outer_div" dir = "rtl" & gt; & Lt ;! - Remove all the content formatting from the style for external content and keep it in a style for this sub-div is // -> & Lt; Div class = "textformattingclass" & gt; Some lessons! & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "outer_div" dir = "rtl" & gt; & Lt; Div class = "textformattingclass" & gt; Some lessons! & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "outer_div" dir = "rtl" & gt; & Lt; Div class = "textformattingclass" & gt; Some lessons! & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;