Para quienes han trabajado con capas, el gran problema que se produce cuando se deja de usar tablas es el poder dejar el alto de los divs automáticos, con el fin de que si el contenido crece, la capa también lo haga.

Mucho tiempo paso para comprender que existía una propiedad que siempre estuvo presente, y que se utilizaba para no perder la tan cercana relación con las mentadas “tablas”.

Dichas propiedades se encuentran en el atributo “display”, el cual determina como debe ser tratada la capa por el explorador.

Algunas opciones de display:

• table
• table-column
• table-cell
• table-row
• block
• none
• inline
• list-item
• entre otras…

Estas propiedades, como ya ven, determinan como las debe interpretar el explorador.

Usando sentido común, sabemos que todos los contenidos que mostrábamos anteriormente en las tablas modificaban el tamaño del contenedor según lo que se ingresaba, por tanto:

<div style="display:table;">
Esta capa crecerá hacia abajo dependiendo de su contenido, y será como si estuviera dentro de una tabla normal.
</div>


Eso basta para tener capas que funcionen como tablas.