Question

I need to align two texts one is to left and other is to right with in the same table cell.
I could achieve this by doing the followng.

    <td valign="bottom" style="vertical-align:bottom;">
     <div style="float:left;text-align:left;">Yes,He is.</div>
     <div style="float:right;text-align:right;"><img src="x.gif" alt="img" height="30px"/>  </div> 
</td>

But the thing is the left-aligned text is gone up when I did this. That text should be aligned to bottom vertically in the table cell. I tried by setting "vertical-align:bottom" to td cell. But didnt work.

Can somebody help…here is the jsfiddle

Answer 1

Wrap child divs with a outer div and give position:relative to outer div and absolute to child divs.

HTML

<td >
    <div class="wrap">
 <div class="left">Yes,He is.</div>
 <div class="right"><img src="x.gif" alt="img" height="30px"/></div>
  </div>
</td>

CSS

.wrap{position:relative;overflow:auto}
.left{text-align:left; bottom:0; position:absolute; left:0}
.right{float:right;text-align:right;}

DEMO