CODEWITHSUNDEEP
htmlcssvertical-alignment
Rama Rao M
Rama Rao M

Reputation: 3051

Align right and left and vertically bottom in the same table cell


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

Upvotes: 0

Views: 9307

Answers (4)

Mengfei Xue
Mengfei Xue

Reputation: 1

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

Upvotes: 0

Yash Singla
Yash Singla

Reputation: 144

This is happening cause the image height is 30px and the text height is small. For aligning to bottom, assign a relative position to the parent td and then assign the text div to the bottom left of the td. 

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

JSFIDDLE Link

Upvotes: 0

Sowmya
Sowmya

Reputation: 26969

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

Upvotes: 1

Eveli
Eveli

Reputation: 498

You can work around it, just create a table in the cell with invisible border for all the texts. I do it like that, when im having trouble with things like that.

Upvotes: 1

Related Questions