Strange wrapping on inline span in IE7

I have the following:

HTML:

<div class='container'>
 <div class='height'></div>
 <div class='valign'>
  <div class='ie'>
   <span>short text</span>
   <span>short text</span>
   <span>long text...</span>
  </div>
 </div>
</div>

CSS:

div.container{float:left;width:550px;display:table;}
div.container div.height{height:40px;}
div.container div.valign{display:table-cell;vertical-align:middle;white-space:normal;}
div.container div.valign div.ie{text-indent:-5px;}
div.container div.valign div.ie span{white-space:normal;}

IE7 specific:

div.container div.height{float:left;}
div.container div.valign{position: relative;top: 50%;white-space:normal;}
div.container div.valign div.ie{position: relative;top: -50%;white-space:normal;}
div.container div.valign,
div.container div.valign span{zoom: 1;white-space:normal;}

In IE7, the span with "long text..." breaks onto a new line when it's width is larger than the space available on the line. So I end up with:

short text short text 
long text...more long text...

rather than:

short text short text long text...
more long text...

yes, I know, ugly vertical align hac开发者_如何学运维k... what can you do...

anyone have a solution?

---

Problem was with the

div.container div.valign span{zoom: 1;}

Removing this line fixes the issue (and as a bonus, the vertical align still works!). Removing the text from the span also fixed the problem, but I needed access to the text, so it needed to be contained.