彼此重叠

Question

I want to make these spans on top of each other but not so luck,

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>

Desired result,

Answer 1

Try to this way

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

what about using position - like here 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>

Answer 3

Add clear: both in both span. Here is working code:

 .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>