Firefox unexpected line break using floats & overflow hidden
css, css-float, firefox, overflow
Solution
Add `display: inline-block;` to `.box`:
Demo
Problem
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?