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

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.