title: Elements not wrapping as expected in IE 8/ 9
body: <p>Yet another "IE is doing something different from other browsers" question but this is one is slightly unusual in that IE7 does the correct thing but IE 8 and 9 do not.</p>
  
  <p>Here is the situation, I have a simple 3 column layout.  The first 2 columns are fixed width and the third I want to be variable width so that it uses up the available space.  </p>
  
  <p>I am outputting textual data in the third column.  The text data should be free to wrap at the end of a data value/sentence - so I output it as .</p>
  
  <pre><code>&lt;span class="nowrap"&gt;foo bar&lt;/span&gt;
  &lt;span class="nowrap"&gt;moo bahh&lt;/span&gt;
  </code></pre>
  
  <p>(See the example below also)</p>
  
  <p>everything works like a charm in FF, Chrome and IE7 but internet explorer 8 and 9 treat the consecutive nowrap spans as 1 big nowrap element (i.e. it puts all the values on one line).  There is white space between the spans and so (IMO) it should be free to wrap.
  The only way i can get IE8/9 to wrap as I want is to include some non-white space between the nowrapped spans.</p>
  
  <p>This workaround is OK but I am curious to know: </p>
  
  <ul>
  <li>Is IE rendering the markup correctly or incorrectly (i.e. is my expectation that the values should wrap incorrect.  I only assume that IE is at fault because the other browsers do it differently)</li>
  <li>Is there a more elegant solution that the one I have:  In an ideal world, I would want to ensure that the separating comma never wrapped to the start of a new line.</li>
  </ul>
  
  <p>Thanks in advance</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html&gt;
  &lt;head runat="server"&gt;
      &lt;style type="text/css"&gt;
          .leftBit {float:left; margin-right: 10px; background-color: yellow;}
          .middleBit {float:left; width:305px; margin-right: 10px; background-color: orange;}
          .remainder {margin-left: 420px;  min-width: 200px;background-color: #DDD;}
          .nowrap { white-space:nowrap;}
          .clear {clear: both;}
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
      &lt;div&gt;
           &lt;div &gt;
              &lt;div class="leftBit"&gt;Left bit&lt;/div&gt;
              &lt;div class="middleBit"&gt;This value wraps - but I want to keep the values on the same line&lt;/div&gt;
              &lt;div class="remainder"&gt;
                  &lt;span&gt;Blue the colour of the sea and the sky, &lt;/span&gt; 
                  &lt;span&gt;Green green green green of home, &lt;/span&gt; 
                  &lt;span&gt;Red red red red fire engine red red red red&lt;/span&gt;
              &lt;/div&gt;
           &lt;/div&gt;
           &lt;div class="clear"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
           &lt;div &gt;
              &lt;div class="leftBit"&gt;Left bit&lt;/div&gt;
              &lt;div class="middleBit"&gt;I don't know why these values do not wrap?  They do in FF and chrome and IE7 but not IE8/9&lt;/div&gt;
              &lt;div class="remainder"&gt;
                  &lt;span class="nowrap"&gt;Blue the colour of the sea and the sky, &lt;/span&gt; 
                  &lt;span class="nowrap"&gt;Green green green green of home, &lt;/span&gt; 
                  &lt;span class="nowrap"&gt;Red red red red fire engine red red red red&lt;/span&gt;
              &lt;/div&gt;
           &lt;/div&gt;
           &lt;div class="clear"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
           &lt;div &gt;
              &lt;div class="leftBit"&gt;Left bit&lt;/div&gt;
              &lt;div class="middleBit"&gt;Here is my "work around" - I have to include some non-whiite space between the "nowrap" elements.  Is this a bug or expected behaviour?&lt;/div&gt;
              &lt;div class="remainder"&gt;
                  &lt;span class="nowrap"&gt;Blue the colour of the sea and the sky &lt;/span&gt; ,
                  &lt;span class="nowrap"&gt;Green green green green of home &lt;/span&gt; ,
                  &lt;span class="nowrap"&gt;Red red red red fire engine red red red red&lt;/span&gt;
              &lt;/div&gt;
           &lt;/div&gt;
           &lt;div class="clear"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;hr /&gt;
      &lt;/form&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>