html – Positioning<div> v<td>

Question:

Help me please. For a long time I have been trying to lower the div in the column to the lower border of td. But they are stubbornly centered vertically.

table.nonogram {
    border-spacing: 0px;
    font-size: 16px;
}

.nonogram tr {
    height: 21px;
}

.nonogram td {
    border: 1px solid black;
    padding: 0px;
}
.nonogram div {
    margin: 0px;
    display: inline-block;
    float: right;
    width: 21px;
    height: 21px;
    border: 1px black solid;
    text-align: center;
}
.nonogram .top-elems div {
    clear: both;
}
<table class="nonogram">
  <tr>
    <td></td>
    <td class="top-elems">
      <div>1</div>
    </td>
    <td class="top-elems">
      <div>1</div>
      <div>1</div>
    </td>
    <td class="top-elems">
      <div>3</div>
    </td>
  </tr>
  <tr>
    <td class="side-elems">
      <div>2</div>
    </td>
    <td></td><td></td><td></td>
  </tr>
  <tr>
    <td class="side-elems">
      <div>1</div>
      <div>1</div>
    </td>
    <td></td><td></td><td></td>
  </tr>
  <tr>
    <td class="side-elems">
      <div>2</div>
    </td>
    <td></td><td></td><td></td>
  </tr>
</table>

Answer:

.top-elems{
  vertical-align: bottom;
}

PS: For those who come here from Google wanting to lower the div down without using the table, I recommend looking aside http://htmlbook.ru/css/display

Scroll to Top