垂直对齐在td内部不起作用

Question

I am trying to vertically align my div (which is inside of a td ) to be at the top, but vertical-align: top is not working. Here is the fiddle:

http://jsfiddle.net/hreDw/1/ (I want that yellow b to be at the top)

How can I do this? Also, amount of a's inside of the second td is dynamic - so the height of the table is also dynamic.

Answer 1

The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.

Read more about vertical-align

Therefore, you have to apply the vertical-align property to the td element:

.first {
    background-color:black;
    min-height: 10px;
    min-width: 10px;
    vertical-align: top;
}
.first div {
    background-color:yellow;
}
.second {
    background-color:green;
    min-height: 10px;
    width: 10px;
}

Answer 2

The vertical-align has to be on the td and not the div .

Right now you are simply applying the vertical alignment to the div itself, but instead you want everything in the TD to be vertically aligned:

.first {
    background-color:black;
    min-height: 10px;
    min-width: 10px;
    vertical-align: top;
}