[CSS] divs positioneren binnen tabelcel

[Verwijderd]

Ik heb de volgende (versimpelde) tabelstructuur:

code:

<table>
  <tr>
    <td class="main">
      <div class="left">
        left
      </div>
      <div class="right">
        right
      </div>
    </td>
  </tr>
</table>

Ik wil de twee div's binnen de tabelcel naast elkaar hebben. Dit probeer ik met deze css-code:

code:

td.main {
  width: 400px;
  background: #dddddd;
  font: verdana;
  color: #414141;
}

div.left {
  position: relative;
  left: 10px;
  top: 10px;
  width: 150px;
  height: 30px;
  background: #990000;
  color: #ffffff;
}

div.right {
  position: relative;
  left: 300px;
  top: 10px;
  width: 40px;
  height: 40px;
  background: #000066;
  color: #ffffff;
}

Maar het enige dat gebeurt is dat de rechter-div onder de linker wordt geplaatst. Kan iemand me vertellen wat ik fout doe?

[André]

Met relatieve positionering kun je geen coordinaten aangeven, je kunt ze beter allebei op float:left zetten bijvoorbeeld

[Verwijderd]

En ze dan met behulp van margin positioneren? Ja, dat lijkt te werken.

[BtM909]

Of je TD op relatief zetten en je div op absolute

[SchizoDuckie]

Even voor de duidelijkheid: waaromwil je een div in een tabel zetten? dan maak je toch een extra td aan

[Currahee]

Als ik het goed bekijk gebruik jij divs binnenin een tabel cel, wat dus volgens mij duidt op een lay-out die gebruik maakt van dus een tabel. Als je die tabel nu eens om de divs weghaald en het zo in elkaar zet dat hij gebruikt maak van divs met daarbinnen verschillende classes dan is het hele probleem van het prutsen met de tabel opgelost en heb je te maken met een veel overzichtelijkere pagina.