Home/ Questions/Q 9226801
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T04:55:02+00:00

Let’s say I have code like this : <table> <tr> <td> <div id=top>top</div> <div

  • 0

Let’s say I have code like this :

<table>
<tr>
    <td>
        <div id="top">top</div>
        <div id="bot">bottom</div>
    </td>
</tr>
</table>

I’m trying to align #top to the top of the cell and #bot to the bottom through CSS.

#top { vertical-align:top; }
#bot { vertical-align:bottom; }

The above doesn’t seem to work – it doesn’t really seem to be having any effect at all. Here’s a link to the code : http://jsfiddle.net/vKPG8/28/

Any explanations on why this is happening and how it could be fixed?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0