looks correctly in IE but not correctly shown in FF:
< Code> & lt; Div class = "main_div" dir = "rtl" & gt; & Lt; Div class = "outer_div" dir = "rtl" & gt; & Lt; Div class = "textformatting" dir = "rtl" & gt; & Lt; Div class = "inner_div" & gt; Text & lt; / Div & gt; & Lt; Div class = "inner_div" & gt; Image & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "outer_div" dir = "rtl" & gt; & Lt; Div class = "textformatting" dir = "rtl" & gt; & Lt; Div class = "inner_div" & gt; Text & lt; / Div & gt; & Lt; Div class = "inner_div" & gt; Image & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "outer_div" dir = "rtl" & gt; & Lt; Div class = "textformatting" dir = "rtl" & gt; & Lt; Div class = "inner_div" & gt; Text & lt; / Div & gt; & Lt; Div class = "inner_div" & gt; Image & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;
=======================
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%; } Div.textformatting {float: right; Padding-down: 5px; Padding-top: 5px; Padding-left: 10px; Padding-right: 10px; Border: dashed; Border width: thin} div.inner_div {float: right; Width: 50%; Border: dotted; Threshold width: thin; } Float does not work in "inner_div"!
If you put padding in your element, then IE and FF yield different results. Like if you have width: 100px; and padding: 10px; If there is a div with , then IE will give you the & lt; Div & gt; with 100px width 10px padding in all sides, which gives you only inside 80 pixel width space. While in FF it will give you & lt; Div & gt; 100px width and 10px padding will give all sides, which will give you the & lt; Div & gt; will be 120px wide. /
Remember the range gives an additional 1px at the total width, because you used the width: 50% which will make 50% + 1px, that's why your true_div not correct float: true but if you use a fixed width then you can see the display: inline
Can also be used
div class = "main_div" dir = "rtl" & gt; & Lt; Div class = "outer_div" dir = "rtl" & gt; & Lt; Div class = "textformatting" dir = "rtl" & gt; & Lt; Div class = "inner_div" & gt; Text & lt; / Div & gt; & Lt; Div class = "inner_div" & gt; Image & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "outer_div" dir = "rtl" & gt; & Lt; Div class = "textformatting" dir = "rtl" & gt; & Lt; Div class = "inner_div" & gt; Text & lt; / Div & gt; & Lt; Div class = "inner_div" & gt; Image & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "outer_div" dir = "rtl" & gt; & Lt; Div class = "textformatting" dir = "rtl" & gt; & Lt; Div class = "inner_div" & gt; Text & lt; / Div & gt; & Lt; Div class = "inner_div" & gt; Image & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;
================================ ==============================
Comments
Post a Comment