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

Answer 1

white-space: normal didn't do the trick for me. What worked was white-space: nowrap; on the direct text container.

Answer 2

Add display: inline-block; to .box:

Demo

Answer 3

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 4

Actually, when you are going for a solution like http://jsfiddle.net/Volker_E/x5rPd/ you don't need a second div for your desired behavior.