14

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?

Mohsen Safari
  • 6,669
  • 5
  • 42
  • 58
Chris
  • 183
  • 1
  • 7

4 Answers4

42

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.

Bassel Mourjan
  • 3,604
  • 3
  • 26
  • 37
  • 2
    This worked for me - the container element was a button and setting it to `white-space: normal` fixed the issue. Thanks! – Alex L Oct 29 '13 at 07:41
  • 1
    Works. But Why? especially since it seems crazy that nowrap makes it wrap to next line... – Pascal_dher Sep 04 '15 at 07:36
  • If you need `nowrap` for your container, then I'd suggest this solution: http://stackoverflow.com/a/26306907/2550529 – SepehrM Dec 09 '16 at 11:15
5

Add display: inline-block; to .box:

Demo

Adrift
  • 58,167
  • 12
  • 92
  • 90
  • 1
    This works exactly for the purpose of the original Fiddle, but unfortunately it's not exactly what I'm looking for, since I need "outer-containers" to be a little more flexible. If the `.outer-container` wasn't floated, the `.box` should still span "100% up to" the prior floated element because of `overflow: hidden;`, while the whole thing spans 100%. [imgur](http://i.imgur.com/MLtLMjp.png), [new Fiddle without inline-block](http://jsfiddle.net/6qAwA/11/) – Chris Feb 27 '13 at 18:04
  • Got it.. I suppose in the case of having one `.box`, I can meet in the middle and use a more specific selector to add `display: inline-block;`. [new Fiddle](http://jsfiddle.net/6qAwA/16/). It's still strange though, and I don't know that this fix makes the issue seem like any less of a bug in FF. – Chris Feb 27 '13 at 20:33
0

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.

Volker E.
  • 5,911
  • 11
  • 47
  • 64
  • This also makes sense for the original issue, but for the purposes of the project I'm working on, that block-level element is required. – Chris Feb 27 '13 at 18:15
0

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

T3KBAU5
  • 1,861
  • 20
  • 26
montagproject
  • 1