Cuando estamos diseñando una página es muy común que deseemos la barra de menú a la izquierda o derecha y el contenido a un lado y que lo queramos hacer SIN tablas. En ocasiones no nos importa si los div’s, pero en otras, por cuestiones de estética deseamos que ambas estén del mismo tamaño y si a esto le agregamos que muchas páginas son de contenido dinámico y no tenemos idea de que tan grande va a crecer el Height de los div’s (y aunque no sean páginas de contenido dinámico puede resultar tedioso poner un Height en cada situación del sitio web) puede resultar un poco frustrante. Sin embargo la solución no es tan complicada como pensamos.
¿Por qué las tablas no son una solución? Bueno pues por que como comenta Pedro CM en su blog: “Es más fácil renderizar un contenido con div's que con tablas. Los div's son más rápidos, semánticos y accesibles.”.
Caso
Supongamos que tenemos un div Container y dentro de este 2 div’s, uno con la clase Side para el menú y otro con la clase Content para el contenido de la pagina. Además queremos que Side esté a la derecha de Content y que ambos crezcan del mismo tamaño.
Solución 1
Mas fácil de lo que podemos pensar es simplemente asignar table-cell a la propiedad display de las clases Side y Content y eso es todo, obtendríamos un resultado como la imagen 01.
Opcionalmente podemos asignar el valor table a la propiedad display de la clase Container para obtener un resultado como la imagen 02.
Código
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style type="text/css">
.Container
{
background-color:Red;
display:table;
}
.Side
{
background-color:blue;
display:table-cell;
}
.Content
{
background-color:Green;
display:table-cell;
}
</style>
</head>
<body>
<div class="Container">
<div class="Side">texto <br />texto <br />texto <br />texto <br /></div>
<div class="Content">texto <br />texto <br />texto <br />texto <br />texto <br />texto <br />texto <br />texto <br />texto <br />texto <br /></div>
</div>
</body>
</html>
Solución 2
Desafortunadamente la solución uno no funciona con Internet Explorer 6, lastima era algo muy fácil. Aunque la verdad yo ya casi no diseño para ie6 (salvo algunas solicitudes especiales) pues el número de usuarios de ie6 ya no es el mismo que hace 3 años. Personalmente prefiero usar la solución uno, pero es cuestión de cada quien cual usar. El ejemplo de la solución 2 lo vi en: http://www.cssblog.es/columnas-equilibradas-en-css/
codigo<!DOCTYPE html PUBLIC "-//W3C//DTD = XHTML 1.0=20 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Columnas equilibradas</title>
<style type="text/css">
body
{
background-color:Yellow;
}
#caja_izq
{
width: 850px;
margin: 20px auto;
color: #fff;
background-color: #4c9ab1;
overflow: auto;
}
#caja_der
{
width: 500px;
float: right;
background-color: #82b04d;
border-left: solid 30px #fff;
}
.columna_izquierda
{
width: 280px;
float: left;
padding: = 20px;
position: relative;
margin-left: -350px;
}
.columna_derecha
{
width: 450px;
float: left;
padding: = 20px;
}
</style>
</head>
<body>
<div id="caja_izq">
<div id="caja_der">
<div class="columna_izquierda">texto <br />texto <br />texto <br />texto <br /></div>
<div class="columna_derecha">texto <br />texto <br />texto <br />texto <br />texto <br />texto <br />texto <br />texto <br />texto <br /></div>
</div>
</div>
</body>
</html>
