CODEWITHSUNDEEP
csshtmlcross-browsercss-float
user458975
user458975

Reputation: 35

Float in div tag dosen't Work in Firefox

In IE show correctly but in FF Doesn't Show correctly:

<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>

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

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;
}

Float in "Inner_div" doesn't Work!

Upvotes: 0

Views: 2277

Answers (1)

fesh
fesh

Reputation: 216

IE and FF gives different result if you put padding in your element. e.g. if you have a div with width:100px; and padding:10px; , IE will give you a <div> with 100px width with 10px padding in all side, which give you only 80px width of space inside. While in FF it will give you <div> with 100px width and 10px of padding all side which will give you a total of 120px width of <div>.

remember border gives additional 1px on the total width, since you used width:50% that will make 50% + 1px, that is why your inner_div didn't float:right correctly. but if you use a fixed width you can use display:inline

anyway try this

<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>

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

body{
    margin: 0px; 
    padding: 0px;
}
div.main_div{
    border:1px dotted #FFCC66; 
    border-width:thin; 
    background: #ffffaa; 
    width: 100%; 
    overflow:hidden;
}
div.outer_div{
    float: right; 
    width:33.33333%; 
    background-color:#FF0000;
}
div.textformatting{
    float: right; 
    margin:5px 10px; 
    border: dashed; 
    border-width:thin; 
    overflow:hidden; 
    width:95%;
}
div.inner_div{
    float: right; 
    width: 49%; 
    border: dotted; 
    border-width: thin;
}

Upvotes: 1

Related Questions