css - Break span to newline(s) instead of crossing or pushing right float divs? -

how can push text of span (which starts @ variable left position) newline respects space of set of fixed right floated divs?

i'd need make sure span text "this 1 needs break..." breaks newline instead of pushing fixed width divs right of next row. since inside tree, left of spans variable, deeper inside hierarchy, less total width.

the solution has work ie8.

the html:

<li>     <div>+</div>     <div class="icon">         <span class="nodetext">this 1 needs break before next span (orange line)</span>         <span class='tree'>              <div>fixed</div>              <div>40px</div>              <div>for</div>              <div>these</div>         </span>     </div> </li> 

the css:

.tree {        position:relative;     float:right; }  .tree div {    float: left;    width: 40px; }  span.nodetext {     /*         how respect orange line boundary?     */ } 

one image is...

i made jsfiddle. incorrect behavior: if right column (with "result" , "css") wide enough display correct. if right column small result messed up. (the css not 100% correct in fiddle: orange line not fixed due margins/paddings - added in attempt make clearer what)

i hate it... better in table. unless want use jquery jump down div, width, , put on span above. or can start thinking of in terms of making div's columns instead of rows.