White-space: nowrap vs white-space: normal why is the effect on floating elements so big?

Question

Definition from w3c : normal Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default Play it » nowrap Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a
tag is encountered.

So why does it make so much difference in the looks of floated elements?

e.g. compare this:

JsBin with white-space normal showing a nicely aligned layout

<table>
    <thead>
      <tr>
        <th>
          <div style="background-color: lightblue; width: 600px; white-space: normal;">
            <span style="display: inline-block; height:20px; background-color: red; margin: 5px 3px;float: left;">
              Button
            </span>
            <span style="display: inline-block; height:20px; background-color: red; margin: 5px 3px;float: none;">
              Button
            </span>
            <span style="display: inline-block; height:20px; background-color: red; margin: 5px 3px; float:right;">
              Button right
            </span>
            <div style="clear: both" />
        </div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr><td>note: white-space is normal here</td></tr>
    </tbody>
  </table>

White this where white-space: nowrap is used

it's the same code as above, only this time white-space: nowrap;

someone got a clue? [EDIT] as people commented they can see no difference, I upload a screenshot of the problematic white-space: nowrap I'm on firefox 10.0.4

Answer 1

I somewhat retract my initial comment above. If you have divs floated inside a white-space: nowrap div and your parent div has a fixed width, you would get what I mentioned in my comment. However if your children were either inline or inline-block then those child divs would just keep going beyond the right side overflow (just like what inline text would do). Normally, when you float: left the children reach the end of the parent and wrap onto another line.

Check out this fiddle illustration.