Ho dei problemini a riprodurre quello che potete vedere in questa tabella:

codice:
<div align="center">
  <table border="1">
    <tr>
      <td width="100"><div align="center">VMENU</div></td>
      <td width="600"><div align="right">VMENU VMENU VMENU VMENU</div></td>
    </tr>
  </table>
</div>
Ho fatto la cosa con DIV e SPAN ma ho un problema. Non riesco a ricreare quella separazione che ho nelle due celle e quindi a dare due allineamenti differenti.
Ho provato così:

codice:
<div style="position:relative;width:800px;margin: auto;">
  <div style="position: relative; min-height: 20px; margin: 5px auto 5px auto; border-bottom: 1px solid #d7d7d7; width: 800px;" >
    <div style="position:relative;left:20px;width:100px;">
      <span class="vocimenu" style="margin-right:100px;">MENU</span>
    </div>
    <div style="position:relative;left:180px;background-color:red;">
      <span class="vocimenu">MENU 1</span>
      <span class="vocimenu">MENU 2</span>
      <span class="vocimenu">MENU 3</span>
      <span class="vocimenu">MENU 4</span>
      <span class="vocimenu">MENU 5</span>
     </div>
  </div>
</div>
Ma il risultato è che mi trovo due linee, una sotto all'altra e non come nella tabella. Riesco a sistemare la cosa specificando il top dei due livelli ma credo di aver perso di vista il metodo più logico...


qualche suggerimento?