title: Text aligned to top and bottom of cell
body: <p>Let's say I have code like this :</p>
  
  <pre><code>&lt;table&gt;
  &lt;tr&gt;
      &lt;td&gt;
          &lt;div id="top"&gt;top&lt;/div&gt;
          &lt;div id="bot"&gt;bottom&lt;/div&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I'm trying to align #top to the top of the cell and #bot to the bottom through CSS.</p>
  
  <pre><code>#top { vertical-align:top; }
  #bot { vertical-align:bottom; }
  </code></pre>
  
  <p>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 : <a href="http://jsfiddle.net/vKPG8/28/" rel="noreferrer">http://jsfiddle.net/vKPG8/28/</a></p>
  
  <p>Any explanations on why this is happening and how it could be fixed?</p>