How to bottom align a DIV within a variable size TD

Question

How to bottom align a DIV within a variable size TD

1.4k views Asked by Brian Hawk At 23 October 2024 at 19:40

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>

enter image description here
Red one is the <td> with background-color. I need the SO#... <div> to be bottom aligned with the float:right img.

Original Q&A

There are 3 answers

**Pralhad Narsinh Sonar** · Answer 1 · 2015-06-13 22:23:42

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:

I have removed the in-line css
Give an id to the div - td-content
Included css class
Please remove the table border latter.

**afzalex** · Answer 2 · 2015-06-13 22:32:56

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.

Fiddle

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>

**lmgonzalves** · Answer 3 · 2015-06-13 22:19:08

lmgonzalves On 13 June 2015 at 22:19

You only need to "clear" the float applied to img:

.bottom{
    clear: both;
}

HTML:

<div class="bottom">bottom text</div>

FIDDLE: https://jsfiddle.net/L0j6sohs/

TechQA.

How to bottom align a DIV within a variable size TD

There are 3 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in VERTICAL-ALIGNMENT

Popular Questions

Popular Tags

Trending Questions