dk123 dk123 - 1 year ago 60
CSS Question

css : text aligned to top and bottom of cell

Let's say I have code like this :

<div id="top">top</div>
<div id="bot">bottom</div>

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 :

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

Answer Source

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; }

Check here for more info:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download