Put a div at the beginning of a table cell

Question

I having trouble trying to put a div with the style catalog at the top of the cell of a table. I don't know why because in the next column, I have a div and it appears in the right place.

What am I doing wrong?

The code, live at jsFiddle:

<table id="tblButtonContainer" style="margin:0px;border:0px; border-collapse: collapse; border-spacing: 0;">
<tbody>
<tr>
  <td style="">
    <div class="ui-accordion-header ui-helper-reset ui-state-default topCatalog">
       Categorias
    </div>
  </td>
  <td>
    <div class="ui-accordion-header ui-helper-reset ui-state-default">
      <label style="float:left;color:#FFF">Buscar</label>
      <input id="txtFinder" class="txtInput" type="text" value="Buscar" size="40">
      <input id="btnFinder" type="button" value="Buscar" class="ui-button ui-widget ui-state-default ui-corner-all" role="button">
    </div>
  </td>
</tr>
<tr>
  <td style="padding-right: 20px">
    <div class="catalog ui-accordion-header ui-helper-reset ui-state-default" style="200px">
      <ul class="menuCat">
        <li>
            <label class="formatText">Accesorios 4x4</label>
            <span class="ui-icon ui-icon-triangle-1-e" style="float:right"></span>
        </li>
        <li>
            <label class="formatText">Frenos y Pastillas</label>
            <span class="ui-icon ui-icon-triangle-1-e" style="float:right"></span>
        </li>
        <li>
            <label class="formatText">Tren Delantero</label>
            <span class="ui-icon ui-icon-triangle-1-e" style="float:right"></span>
        </li>
      </ul>
    </div>
  </td>
  <td>
    <div id="catalogSearch" class="boxShadow">
      <table id="tblCatalogSearch" class="centerTable" style="text-align:center">
      <tbody>
      <tr>
        <td colspan="3">
          <div style="margin:0;width:490px" class="ui-state-hover borders">
             Elige el modelo de tu vehículo
          </div>
          <div style="height:20px"></div>
        </td>
      </tr>
      <tr>
        <td>
          <label>Marca</label>
          <select name="brand" id="brand">
            <option value="0">Elige una Marca</option>
            <option value="1">prueba</option>
          </select>
        </td>
        <td>
          <label>Modelo</label>
          <select name="model" id="model" disabled="disabled"></select>
        </td>
        <td>
          <label>Año</label>
          <select name="year" id="year" disabled="disabled"></select>
        </td>
      </tr>
      <tr><td><div style="height:20px"></div></td></tr>
      <tr>
        <td colspan="3">
          <input name="btnSearch" id="btnSearch" value="Buscar" type="button" class="ui-button ui-widget ui-state-default ui-corner-all" role="button">
        </td>
      </tr>
      </tbody>
      </table>
    </div>
    <div id="results" class="boxShadow ui-corner-all borders" style="display: none; ">
      <div style="margin:0;width:490px" class="ui-state-hover borders">
        <span class="formatText" style="color:#373737;font-weight:bold;margin-left:20px">
            Resultados de la Busqueda:
        </span>
      </div>
      <table id="tblResult">
      <tbody>
      <tr></tr>
      <tr><td>Uno</td></tr>
      <tr><td>dos</td></tr>
      </tbody>
      </table>
    </div>
  </td>
</tr>
</tbody>
</table>

Note: I'm using jQuery-UI to help me with the styles I don't know if that is part of the problem.

Answer 1

Just add vertical-align:top; to your cell.

The default table cell behaviour is to vertically align to the centre. The second cell looks correct to you because it fills the whole cell. But it isn’t technically aligned to the top at all.

Answer 2

Use: #tblButtonContainer td {vertical-align: top;}.

Don't use inline styles!

You can also consider adding:

#tblButtonContainer td  div {
    display: table;
    height: 100%;
    width: 100%;
}

But I can't vouch for that in all browsers.