Esta ves decidí escribir esta tutoría sobre como crear un layout de 2 columnas centrado, vamos a ver algunos detalles sobre posicionamiento de elementos, nada muy elaborado pero que bien puede despejar de muchas dudas a muchas personas.
El HTML
Nada muy elaborado, 5 elementos DIV con distintos identificadores (id), ahora nuestro trabajo es crear un layout de dos columnas y para lograrlo vamos a utilizar CSS para acomodar cada elemento para cumplir con nuestras necesidades.
Paso a paso:
1. Lo primero que vamos a hacer es quitar los margenes que genera el navegador en el elemento BODY (1) y enseguida le vamos a dar un borde azul de 1px solido a cada uno de nuestros elementos DIV para poderlos localizar en nuestro documento (2).
Figura 2.1 index.html
Ahora que tenemos una buena idea de donde se encuentran nuestros elementos vamos a acomodarlos.
2. En este paso vamos a delimitar el ancho de nuestro DIV con el identificador contenedor a 896px (1), acomodar sus margenes 10px de arriba y abajo, auto de izquierda y derecha (2) y por último vamos a darle un relleno de 10px a todas sus dimensiones (3).
Figura 2.2 index.html
Ahora viene la parte divertida, ya delimitamos el área general, ahora vamos a acomodar los elementos que se encuentran dentro del DIV con con el identificador contenedor.
3. Para este paso solo vamos a hacer dos cosas, vamos a delimitar el área de nuestra cabecera y sus margenes, como el ancho ya esta delimitado por el ancho del contenedor solo nos basta establecer su altura (1) y agregarle 10px de margen abajo (2) para separar ese área del resto.
Figura 2.3 index.html
4. Lo que sigue es dimensionar los elementos DIV con los identificadores panel-lateral y contenido, también vamos a colocarlos, el panel-lateral a la izquierda y el DIV con el ID contenido a la derecha, para lograr esto utilizare porcentajes, la propiedad min-height y la propiedad float, además vamos agregar al elemento contenido y panel-lateral un margen de 10px abajo para separarlos del que a futuro vendría siendo el pie de página.
Figura 2.4 index.html
¿¡QUE DIABLOS PASO!?
Aunque no lo pareciese paso algo lógico (si, de esas cosas lógicas que parecen ilógicas), al utilizar la propiedad float, modificamos el flujo del documento y en lo que respecta al elemento con el ID contenedor ambos elementos ya no están dentro de el.
Vamos a ver los métodos para corregir este comportamiento:
a) Podemos utilizar un sibling (hermano) de los elementos que están flotando y aplicarle la propiedad clear con el valor both siempre y cuando este se encuentre después de los elementos que están flotando, en este caso el elemento con ID pie-pagina:
Figura 2.5 index.html
b) En caso de que no contenemos con otro elemento con el cual podamos regresar el flujo a su normalidad, siempre podemos agregar uno y aplicar el método anterior ¿pero por que agregar elementos innecesariamente?, para este método vamos a aplicar el sub-selector ":after" y lo aplicamos de la siguiente manera. (suponiendo que no existiera el elemento pie-pagina:
Figura 2.6 index.html
En este caso como contamos con el elemento pie-pagina vamos a utilizar el primer método (a), y con eso habremos acabado el acomodo de todos nuestros elementos.
Unas palabras sobre :after
El sub-selector :after nos permite insertar contenido después
de el elemento seleccionado, esto no quiere decir que el
contenido queda inmediatamente después sino que lo agrega
a forma de contenido después del contenido ya existente en
el elemento, :after más que ser un sub-selector es una
pseudo clase y es soportada por la mayoría de los los
navegadores (IE8+) para poder utilizarlo con IE8 tiene que
estar declarado el <!DOCTYPE ...>
Figura 2.7 index.html
Antes de dar por terminado este post quisiera hacer notar el uso de margin, si bien podemos utilizar las propiedades margin-top, margin-right, margin-bottom y margin-left para modificar los margenes de arriba, derecha, abajo e izquierda respectivamente la propiedad margin a mi parecer ofrece mucha más flexibilidad ya que la podemos usar de 3 formas distintas:
a) La general:
b) Arriba Abajo, Derecha Izquierda:
c) Arriba, Derecha, Abajo, Izquierda:
Espero que les allá gustado esta tutoría, como siempre les dejo el demo y el código para que lo revisen y descarguen, si tienen alguna duda pregunten, que preguntar no nos hace tontos, y ya saben la mejor forma de agradecerme fue haber leído este post.
Demo
Código
El HTML
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/estilo.css" />
<title>Layout 2 Columnas</title>
</head>
<body>
<div id="contenedor">
<div id="cabecera">
</div><!--cabecera-->
<div id="panel-lateral">
</div><!--panel-lateral-->
<div id="contenido">
</div><!--contenido-->
<div id="pie-pagina">
</div><!--div-->
</div><!--contenedor-->
</body>
</html>
Nada muy elaborado, 5 elementos DIV con distintos identificadores (id), ahora nuestro trabajo es crear un layout de dos columnas y para lograrlo vamos a utilizar CSS para acomodar cada elemento para cumplir con nuestras necesidades.
Paso a paso:
1. Lo primero que vamos a hacer es quitar los margenes que genera el navegador en el elemento BODY (1) y enseguida le vamos a dar un borde azul de 1px solido a cada uno de nuestros elementos DIV para poderlos localizar en nuestro documento (2).
/* 1 */
body{
margin: 0;
}
/* 2 */
div {
border: 1px solid blue;
}[/color]
Figura 2.1 index.html
Ahora que tenemos una buena idea de donde se encuentran nuestros elementos vamos a acomodarlos.
2. En este paso vamos a delimitar el ancho de nuestro DIV con el identificador contenedor a 896px (1), acomodar sus margenes 10px de arriba y abajo, auto de izquierda y derecha (2) y por último vamos a darle un relleno de 10px a todas sus dimensiones (3).
[color=#000000]#contenedor{
/* 1 */
width: 896px;
/* 2 */
margin: 10px auto;
/* 3 */
padding: 10px;
}
Figura 2.2 index.html
Ahora viene la parte divertida, ya delimitamos el área general, ahora vamos a acomodar los elementos que se encuentran dentro del DIV con con el identificador contenedor.
3. Para este paso solo vamos a hacer dos cosas, vamos a delimitar el área de nuestra cabecera y sus margenes, como el ancho ya esta delimitado por el ancho del contenedor solo nos basta establecer su altura (1) y agregarle 10px de margen abajo (2) para separar ese área del resto.
#cabecera{
/* 1 */
height: 100px;
/* 2 */
margin: 0 0 10px 0;
}
Figura 2.3 index.html
4. Lo que sigue es dimensionar los elementos DIV con los identificadores panel-lateral y contenido, también vamos a colocarlos, el panel-lateral a la izquierda y el DIV con el ID contenido a la derecha, para lograr esto utilizare porcentajes, la propiedad min-height y la propiedad float, además vamos agregar al elemento contenido y panel-lateral un margen de 10px abajo para separarlos del que a futuro vendría siendo el pie de página.
/*decimos que ambos tienen una altura mínima de 400px*/
#contenido,
#panel-lateral{
min-height: 400px;
}
/* el panel-lateral al 20% del ancho y flotando a la izquierda*/
#panel-lateral{
width: 20%;
float: left;
margin: 0 0 10px 0; /*El margen de abajo*/
}
/* el contenido al 78% del ancho y flotando a la derecha*/
#contenido{
width: 78%;
float: right;
margin: 0 0 10px 0; /*El margen de abajo*/
}
Nota:
La propiedad min-height es soportada por la mayoría de los
navegadores salvo por IE6 y menores, también hay que agregar
que para poder utilizar el valor inherit en IE8 el documento tiene
que tener declarado el <!DOCTYPE ...>
La propiedad min-height es soportada por la mayoría de los
navegadores salvo por IE6 y menores, también hay que agregar
que para poder utilizar el valor inherit en IE8 el documento tiene
que tener declarado el <!DOCTYPE ...>
Figura 2.4 index.html
¿¡QUE DIABLOS PASO!?
Aunque no lo pareciese paso algo lógico (si, de esas cosas lógicas que parecen ilógicas), al utilizar la propiedad float, modificamos el flujo del documento y en lo que respecta al elemento con el ID contenedor ambos elementos ya no están dentro de el.
Vamos a ver los métodos para corregir este comportamiento:
a) Podemos utilizar un sibling (hermano) de los elementos que están flotando y aplicarle la propiedad clear con el valor both siempre y cuando este se encuentre después de los elementos que están flotando, en este caso el elemento con ID pie-pagina:
#pie-pagina{
clear: both;
}
Figura 2.5 index.html
b) En caso de que no contenemos con otro elemento con el cual podamos regresar el flujo a su normalidad, siempre podemos agregar uno y aplicar el método anterior ¿pero por que agregar elementos innecesariamente?, para este método vamos a aplicar el sub-selector ":after" y lo aplicamos de la siguiente manera. (suponiendo que no existiera el elemento pie-pagina:
#contenedor:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Figura 2.6 index.html
En este caso como contamos con el elemento pie-pagina vamos a utilizar el primer método (a), y con eso habremos acabado el acomodo de todos nuestros elementos.
Unas palabras sobre :after
El sub-selector :after nos permite insertar contenido después
de el elemento seleccionado, esto no quiere decir que el
contenido queda inmediatamente después sino que lo agrega
a forma de contenido después del contenido ya existente en
el elemento, :after más que ser un sub-selector es una
pseudo clase y es soportada por la mayoría de los los
navegadores (IE8+) para poder utilizarlo con IE8 tiene que
estar declarado el <!DOCTYPE ...>
Figura 2.7 index.html
Antes de dar por terminado este post quisiera hacer notar el uso de margin, si bien podemos utilizar las propiedades margin-top, margin-right, margin-bottom y margin-left para modificar los margenes de arriba, derecha, abajo e izquierda respectivamente la propiedad margin a mi parecer ofrece mucha más flexibilidad ya que la podemos usar de 3 formas distintas:
a) La general:
elemento{
margin: [valor en pixels, pt, em, etc];
}
b) Arriba Abajo, Derecha Izquierda:
elemento{
margin: [arriba y abajo] [derecha izquierda];
}
c) Arriba, Derecha, Abajo, Izquierda:
elemento{
margin: [arriba] [derecha] [abajo] [izquierda];
}
Espero que les allá gustado esta tutoría, como siempre les dejo el demo y el código para que lo revisen y descarguen, si tienen alguna duda pregunten, que preguntar no nos hace tontos, y ya saben la mejor forma de agradecerme fue haber leído este post.
Demo
Código