Hola
Aquí dejo unos ejemplos de que los códigos funcionan. Solo debes adaptarlos a tus necesidades.
No he puesto el de tablas, porque la verdad tiene poco sentido, aunque es una opción más.
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="es" />
<style type="text/css">
* {border: 0; padding: 0; margin 0;}
html, body {background: #f00;}
#capa1 {position: absolute; top: 50px; left: 10px; width: 50px; height: 50px; background: #0f0;}
#capa2 {position: absolute; top: 50px; left: 70px; width: 50px; height: 50px; background: #00f;}
#lista1 {display: inline;}
#lista1 li, #lista1 div {display: inline;}
#capa3 {background: #0f0;}
#capa4 {background: #00f;}
#lista2 {float: left; list-style-type: none;}
#lista2 li {float: left; padding: 0 5px; height: 50px;}
#capa5 {background: #0f0; height: 50px; width: 50px;}
#capa6 {background: #00f; height: 50px; width: 50px;}
#limpiador {clear: both;}
</style>
<title>Ejemplo de posionamiento de capas</title>
</head>
<body>
<p>A continuación hay dos capas alineadas una junto a la otra mediante posionamiento absoluto</p>
<div id="capa1">capa 1</div>
<div id="capa2">capa 2</div>
<p> </p><p> </p>
<p>A continuación hay dos capas alineadas una junto a la otra mediante el uso de listas y display: inline</p>
<ul id="lista1">
<li><div id="capa3">capa 3</div></li>
<li><div id="capa4">capa 4</div></li>
</ul>
<p> </p>
<p>A continuación hay dos capas alineadas una junto a la otra mediante el uso de listas y float: left</p>
<ul id="lista2">
<li><div id="capa5">capa 5</div></li>
<li><div id="capa6">capa 6</div></li>
</ul>
<p id="limpiador"> </p>
</body>
</html>
Felicidad