title: White-space: nowrap vs white-space: normal why is the effect on floating elements so big?
body: <p><a href="http://www.w3schools.com/cssref/pr_text_white-space.asp" rel="nofollow noreferrer">Definition from w3c</a> : 
  <strong>normal</strong>  Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default  Play it »
  <strong>nowrap</strong>  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 <br /> tag is encountered.</p>
  
  <p>So why does it make so much difference in the looks of floated elements? </p>
  
  <p>e.g. compare this:</p>
  
  <p><a href="http://jsbin.com/ibifoq/22/edit" rel="nofollow noreferrer">JsBin with white-space normal showing a nicely aligned layout</a></p>
  
  <pre><code>&lt;table&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;
            &lt;div style="background-color: lightblue; width: 600px; white-space: normal;"&gt;
              &lt;span style="display: inline-block; height:20px; background-color: red; margin: 5px 3px;float: left;"&gt;
                Button
              &lt;/span&gt;
              &lt;span style="display: inline-block; height:20px; background-color: red; margin: 5px 3px;float: none;"&gt;
                Button
              &lt;/span&gt;
              &lt;span style="display: inline-block; height:20px; background-color: red; margin: 5px 3px; float:right;"&gt;
                Button right
              &lt;/span&gt;
              &lt;div style="clear: both" /&gt;
          &lt;/div&gt;
          &lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;&lt;td&gt;note: white-space is normal here&lt;/td&gt;&lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  </code></pre>
  
  <p><a href="http://jsbin.com/ibifoq/23/edit" rel="nofollow noreferrer">White this where white-space: nowrap is used</a></p>
  
  <p>it's the same code as above, only this time white-space: nowrap;</p>
  
  <p>someone got a clue?
  <strong>[EDIT]</strong>
  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
  <img src="https://i.stack.imgur.com/Pyqs2.png" alt="white-space: nowrap results in 2 rows in firefox 10.0.4"></p>