Geek Answers Handbook

Floating elements displayed differently in Chrome / Firefox when starting the "block formatting context",

Chrome and Firefox render floating divs differently and I cannot find a solution.

Chrome (left window): div expands to fit the entire line “123456” when sitting next to the blue square

Firefox (right window): div disables part of a line

Chrome (left), Firefox (right)Demo : http://jsfiddle.net/A8zLY/83/

For reference, I use a method to invoke the BFC block formatting context described here: Expand div to take the remaining width

This method allows the div element (red text) to fill the remaining width of the container when placed along the static width element (blue square)

HTML

<div class="module1">
    <div class="container left">
        <div class="icon"></div>
        <div class="text">123456</div>
    </div>
    <div class="container left">
        <div class="icon"></div>
        <div class="text">123</div>
    </div>
</div>
<div class="module2">
    <div class="container right">
        <div class="icon"></div>
        <div class="text">123456</div>
    </div>
     <div class="container right">
         <div class="icon"></div>
        <div class="text">123</div>
    </div>
</div>

CSS

.icon {
    width: 50px;
    height: 50px;
    background: blue;
}
.text {
    height: 50px;
    font-size: 40px;
    line-height: 50px;
    background: red;    
}
.left .icon { float: left; }
.left .text {
    width: auto;
    overflow: auto;
}
.right .icon { float: right; }
.right .text {
    width: auto;
    overflow: auto;
}

.module1, .module2 {
    position: absolute;
    top: 0;
    border: 4px solid black;
}
.module1 { left: 0; }
.module2 { right: 0; }
.container { margin: 4px; }
+4
1

/ , .icon .left .text .right .text:

.left .text {
    width: auto;
    overflow: auto;
    margin-left: 50px;
}
.right .text {
    width: auto;
    overflow: auto;
    margin-right: 50px;
}

http://jsfiddle.net/xN43L/

+2

More articles:


All Articles