Nivelando la altura de capas paralelas con JQuery

Sí, se que suena medio matemático el título pero a lo que me refiero es al cómo hacer que dos capas (etiquetadas con DIV ); por ejemplo una capa derecha, que contenga enlaces y bloques de un sitio web; y una capa principal, que contenga artículos (como este blog) puedan nivelar sus alturas independientemente de cual de ellas sea más alta que la otra, tal y como lo haría una tabla con dos columnas. Y como una imagen vale más que mil palabras, estos son los resultados a los que queremos llegar:

Maquetando el ejemplo

Para el ejemplo colocaremos dentro de las etiquetas body el siguiente maquetado:

< div id = "contenedor" >
     < div id = "columna" class = "col" >
         test< br />
         test< br />
         test< br />
         test< br />
     </ div >
     < div id = "contenido" class = "cont" >
         test< br />
         test< br />
         test< br />
         test< br />
         test< br />
         test< br />
     </ div >
</ div >

Nótese que el contenido de columna tiene menos texto que el de contenido, en otras palabras será menos alto que esta última.

Aplicando los estilos

Lo primero que haremos es generar nuestra hoja de estilos, esta constará de una capa contenedora a la que llamaremos contenedor y dos capas flotantes, una a la derecha llamada columna , y otra a la izquierda llamada contenido , los atributos que colocaremos a cada capa serán los siguientes:

<style type="text/css">
#contenedor {
width : 300 px ;
float : none;
clear : both;
     }
#columna {
background-color :#FFCC99;
width : 90 px ;
float : right;
     }
#contenido {
background-color :#66FFCC;
width : 190 px ;
float : left;
     }
</style>

Lo que hemos hecho es básicamente posicionar las capas y aplicarle un color de fondo. Si ahora cargamos nuestra web en el navegador veremos que se mostrará con las capas desniveladas en altura.

Usuarios que han visto este tema también han visto...

- Adapta tus páginas a todas las resoluciones
- Encriptar código HTML con Java Script
- Detectar Navegador
- Escribir texto vertical en JavaScript
- Imprimir página con JavaScript

- Versión imprimible de este documento
- Enviar por e-mail este documento