Text aligned to top and bottom of cell

the accepted solution using position: absolute is not a cross-browser compatible solution for this problem, as Firefox doesn't (and according to the spec shouldn't) allow absolute positioning in table cells or elements with display:table-cell.

There doesn't seem to be a truly reliable css-only way of solving this problem, though I do have a css-only fix that works for this case. Essentially what I did is insert a before element that is tall enough to force the bottom line of text to the bottom since it has vertical-align: bottom set. This is essentially the same as putting padding-top, so it's not much of a solution.

demo: http://jsfiddle.net/Be7BT/

td {width:200px;height:100px;border:solid 1px;}
#top { 
    display: inline-block;
    vertical-align:top;
    width: 100%;
}
#bot {
    display: inline-block;
    vertical-align:bottom;
    width: 100%;
}
#bot:before{
    content: '';
    display: inline-block;
    height: 100px;
}

vertical-align is for inline elements and div is a block element. Try with position: absolute and top: 0 and bottom: 0.

td {
  position: relative;
  width: 200px;
  height: 100px;
  border: solid 1px;
}

#top, #bot { position: absolute; }
#top { top: 0; }
#bot { bottom: 0; }

Demo: http://jsbin.com/iyosac/1/edit
Check here for more info: http://css-tricks.com/what-is-vertical-align/

td {
  position: relative;
  width: 200px;
  height: 100px;
  border: solid 1px;
}

#top, #bot { position: absolute; }
#top { top: 0; }
#bot { bottom: 0; }
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <table>
    <tr>
      <td>
        <div id="top">top</div><br/>
        <div id="bot">bottom</div>
      </td>
    </tr>
  </table>
</body>
</html>


I have a better idea, use nested table:

<table width="100px" height="100px" border=1>
    <tr>
        <td valign="top">top</td>
    </tr>
    <tr height=100%>
        <td valign="bottom">bottom
        </td>
    </tr>
</table>

Tags:

Css

Html Table

Recent Posts