4

Chrome and Firefox are rendering floated divs differently and I can't figure out a solution.

Chrome (left window): The div expands to fit the entire string "123456" when sitting next to the blue square

Firefox (right window): The div cuts off part of the string

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

For reference, I'm using a technique to trigger the BFC "block formatting context" described here: Expand a div to take the remaining width

The technique allows a div element (the red text) to fill the remaining width of the container when placed along a static width element (the 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; }
Community
  • 1
  • 1
Nick Carson
  • 678
  • 1
  • 4
  • 11

1 Answers1

2

Try setting the left/right margin equal to the width of .icon on the .left .text and .right .text classes:

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

http://jsfiddle.net/xN43L/

Hidden Hobbes
  • 13,893
  • 3
  • 38
  • 64
  • This works. I am curious however why Firefox behaves this way without the hack. – Nick Carson Aug 06 '14 at 08:24
  • 1
    To be honest, I'm not sure I can explain it, just seems to be a difference in the way Firefox and Chrome render the result. Floating .icon takes it out of the document flow, as .text isn't floated it's kind of oblivious to .icon so setting the margin just ensures that the space it takes up is accounted for. – Hidden Hobbes Aug 06 '14 at 08:36