Firefox unexpected line break using floats & overflow hidden

Question

I have a container div that holds two items: a .button and a .box with text inside. .button comes first and is floated right. .box has no float [this is a constraint - I can't float it left due to similar other structures that depend on there being no float]. .box has overflow: hidden; to establish a new block formatting context. This allows .box to span "100% up to" the prior floated element, .button.

.outer-container houses all of these and is floated right.

http://jsfiddle.net/6qAwA/5/

In Chrome (26.0.1410.12 beta-m PC, 25.0.1364.99 Mac), Safari (6.0.2 Mac), and IE8-9, this will act in a desired way. .box's text stays on one line, and due to .outer-container's right float, will be exactly the size it needs to be. In Firefox, however, the text is broken into another line.

I also find a similar issue when .button is instead floated left - I get desired behavior in everything except for Firefox.

I've seen this Firefox 16.0.1 and 19.0 for PC, and 18.0.1 and 19.0 for Mac. Is this a bug?

Answer 1

I came across this issue today where the floating node would break line only in Firefox even after setting its display to inline-block and the reason for that was that the container node had a style setting of white-space set to nowrap. So resetting the value of white-space to normal on the container node resolved this issue for me.

Answer 2

Add display: inline-block; to .box:

Demo