TD with [white-space:no-wrap] is not working as expected?

css, html, html-table

Solution

Try this: http://jsbin.com/oquniq/26/edit

<td style='white-space:nowrap;'>
  <label>
    <input type='checkbox' />
    <span class='mySpan'>
      Yes
    </span>
  </label>
</td>

And use `position:relative` to adjust the text's vertical align

.mySpan
{
  position:relative;
  top:-2px;
}

Problem

I have a table : please look at the right TD. the yellow div should have its height (mandatory). and I need to vertical align the `checkbox`+`SPAN` So I put both of them as : `float:left` and played with `margin-top`. But When I reduce the browser width , the `SPAN` is going down : I already put no-wrap. I don't care that the text (td#2 ) will be wrapped I just need that the `check-box` +`span` will be together - always. and I can't use a `width` on a wrapper div cause the `Yes` here is in English but it's a multilanguage site. So i need the text to be fit in as its original length. What can I do so the both elements wont be wrapped ? here is the jsbin. Here it is ``` td{ border:solid 1px green; } .myCheck{ float:left; margin-top:16px; } .mySpan{ float:left; margin-top:12px; } ``` ``` <table style='width:100%;' cellspacing=0 cellpadding=0> <tr> <td> 1 </td> <td>Lorem ipsum dolor sit amet, consectetur adipisicing tempor incididunt ut labore et </td> <td style='white-space:nowrap;'> <div style='white-space:nowrap; height:50px;background-color:yellow;float:left;'> <input type='checkbox' class='myCheck' /> <span class='mySpan'>Yes</span> </div> </td> </tr> </table> ``` and here is the problem : In Firefox it does wrap it but in Chrome it does not (which is how it should be).

Original source