How can I bottom align an element (a div or a span) within a table cell that height is dynamically changed.
<tr><td>
<div>Top text</div>
<img src="#variableheight" style="float:right" />
<div style="vertical-align:bottom">bottom text</div>
</td></tr>
Red one is the <td> with background-color. I need the SO#... <div> to be bottom aligned with the float:right img.
On
Try this code code fixed position for the div.
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style>
#td-content {
bottom: 0;
clear: both;
position: relative;
}
table{
border:2px solid red;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<div>Top text</div>
<img src="#variableheight" style="float:right" />
<div id="td-content">bottom text</div>
</td>
</tr>
</table>
</body>
</html>
Please note:
td-content
On
What you are trying to do cannot be done by setting vertical alignment. You will have to do it normal way.
Have two divisions, one for left and another for right. Left division will have texts (top and bottom) and right division will contain image. Now because image will adjust height, keep it as it is (i.e. static) but make left division absolute to match the boundaries of td. Only thing to keep in mind is the distance of left division from right boundary of td so that it will remain away from img.
td {
position: relative;
border: 1px solid black;
width: 200px;
}
img {
width: 50px;
height: 150px;
}
#tdl {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 55px;
}
#tdr {
float: right;
}<table>
<tr>
<td>
<div id="tdl">
<div>Some text aligned on top and wraps down when it hits the image</div>
<div style="position: absolute; bottom: 0px;">bottom text</div>
</div>
<div id="tdr">
<img src="#variableheight"/>
</div>
</td>
</tr>
</table>
You only need to "clear" the
floatapplied toimg:HTML:
FIDDLE: https://jsfiddle.net/L0j6sohs/