Span поверх друг друга

Question

Я хочу, чтобы эти пролеты друг на друга, но не так повезло,

http://jsfiddle.net/76NNp/79/

<td class="rtf hov"> 
    <div>Investment</div> 
    <div class="mub eub"> 
     <span style="float:left">Test</span> 
     <span style="float:right;">I want to be on Top</span> 
     <span style="float:right; color:green">I want to be on bottom</span> 
    </div> 
</td> 

Желаемый результат,

Answer 1

Try до этого

Css

.left{ 
    float:left; 
} 
.right{ 
    float:right; 
} 
.clr{ 
    clear:both; 
} 

HTML

<div class="msub estextsub"> 
    <span class="left">Investment</span> 

    <span class="right">I want to be on Top</span> 
    <div class="clr"></div> 
    <span class="left">Test</span> 
    <span class="right">I want to be on bottom</span> 
</div> 

Demo

Answer 2

Добавить ясно: как и в пролете. Вот рабочий код:

.rtddef { 
 
    padding: 10px 0 10px 10px; 
 
    vertical-align: top; 
 
}

<td class="rtddef es1hov"> 
 
    <div>Investment</div> 
 
    <div class="msub estextsub"> 
 
     <span style="float:left">Test</span> 
 
     <span style="float:right;clear:both;">I want to be on Top</span> 
 
     <span style="float:right; color:green;clear:both;">I want to be on bottom</span> 
 
    </div> 
 
</td>

Answer 3

что об использовании позиции - как здесь http://jsfiddle.net/76NNp/87/

<span style="position:absolute;top:0; right:0">I want to be on Top</span> 
<span style="position:absolute;bottom:0; right:0">I want to be on bottom</span>