Tema 7

Composición con CSS .

¿Cómo utilizamos CSS para distribuir la página en dos columnas?

Podemos hacerlo de distintas formas. Este es el código base sobre el que nos apoyamos para realizar los ejemplos:

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Chapter 12 - CSS Layouts (Method A)</title>

</head>
<body>

....ejemplos....

</body>
</html>

Método A

<div id="header">
...Aquí ponemos el texto de la cabecera...
</div>

<div id="sidebar">
...Aquí ponemos el texto del recuadro...
</div>

<div id="content">
...Aquí ponemos el contenido propiamente dicho...
</div>

<div id="footer">
...Aquí ponemos el texto de pie de página...
</div>

Usaremos la propiedad float. Dividimos nuestra página en elementos usanado la etiqueta <div>, cada una con su identificador único id.

#header: Contendrá un logo, la navegación, etc.
#sidebar: Información y links extra.
#content: El núcleo y cuerpo principal de nuestra página.
#footer: Copyright, créditos, etc.

Estilo de la cabecera y del pié de página

#header {
background: #ccc;
padding: 20px;
}

#footer {
background: #eee;
padding: 20px;
}

Comprobemos el resultado.

Apliquemos float al recuadro.

#header {
background: #ccc;
padding: 20px;
}

#sidebar {
float: right;
width: 30%;
background: #999;
}

#footer {
background: #eee;
padding: 20px;
}

Comprobemos el resultado.

Consigamos las dos columnas reales

#header {
background: #ccc;
padding: 20px;
}

#sidebar {
float: right;
width: 30%;
background: #999;
}

#content {
margin-right: 34%;
}

#footer {
clear: right;
background: #eee;
padding: 20px;
}

Resultado

Método B Doble float

<div id="header">
...Aquí ponemos el texto de la cabecera...
</div>

<div id="content">
...Aquí ponemos el contenido propiamente dicho...
</div>

<div id="sidebar">
...Aquí ponemos el texto del recuadro...
</div>

<div id="footer">
...Aquí ponemos el texto de pie de página...
</div>

#header {
background: #ccc;
padding: 20px;
}

#content {
float: left;
width: 66%;
}

#sidebar {
float: right;
width: 30%;
background: #999;
}

#footer {
clear: both;
background: #eee;
padding: 20px;
}

Comprobemos el resultado

Método C. Float en el contenido

#header {
background: #ccc;
padding: 20px;
}

#content {
float: left;
width: 66%;
}

#sidebar {
background: #999;
}

#footer {
clear: both;
background: #eee;
padding: 20px;
}

No necesitamos definir la anchura para sidebar, simplemente utilizará la anchura que el contenido <div> no está utilizando, en este caso el 34%.

Comprobemos el resultado

En algunos navegadores el código descrito en el paso anterior no funciona bien. El color de fondo de sidebar se muestra por debajo del área de contenido. Esto ocurre porque sidebar no tiene asignado un valor específico de anchura.

Para "corregir" este problema añadiomos un margen izquierdo igual a la anchura del área de content. Si ponemos un poco más de área conseguiremos un espacio en blanco entre las columnas.

#sidebar {
margin-left: 70%;
background: #999;
}

En el caso de que no necesitemos para nuestro diseño un color de fondo, no necesitaremos de margen izquiedo. Eliminamos la declaración #sidebar y reducimos el margen derecho del content <div>. Ambas columnas comparten el color de fondo especificado para la página.

#header {
background: #ccc;
padding: 20px;
}

#content {
float: left;
width: 60%;
margin-right: 6%;
}

#footer {
clear: left;
background: #eee;
padding: 20px;
}

Resultado

Método D. Posicionamiento (Positioning).

Necesitaremos un valor para la altura de header para posionar el sidebar más tarde. Usaremos un valor arbitral, todo dependerá de lo que vayamos a meter.

#header {
background: #ccc;
height: 40px;
}

#footer {
background: #eee;
padding: 20px;
}

El siguiente paso es conseguir un espacio para la columna derecha sin utilizar el atributo float.

#header {
background: #ccc;
padding: 20px;
}

#content {
margin-right: 34%;
}

#footer {
background: #eee;
padding: 20px;
}

Finalmente, utilizamos el posicionamiento absoluto para situar a la capa sidebar. Nos aseguramos que el cuerpo de la página tengan a "0" los márgenes y rellenos.

body {
margin: 0;
padding: 0;
font-family: verdana, sans-serif;
font-size: 12px;
}

#header {
height: 40px;
background: #ccc;
}

#content {
margin-right: 34%;
}

#sidebar {
position: absolute;
top: 40px;
right: 0;
width: 20%;
background: #999;
}

#footer {
padding: 20px;
background: #eee;
}

Comprobemos el resultado

Resolvamos el problema del pié de página (footer) con posicionamiento. Una solución es asignar el mismo margen derecho que tiene el área de "content".

body {
margin: 0;
padding: 0;
font-family: verdana, sans-serif;
font-size: 12px;
}

#header {
height: 40px;
background: #ccc;
}

#content {
margin-right: 34%;
}

#sidebar {
position: absolute;
top: 40px;
right: 0;
width: 20%;
background: #999;
}

#footer {
margin-right: 34%;
padding: 20px;
background: #eee;
}

¿Y si queremos tres columnas? Es muy fácil utilizando este método de poscionamiento. Lo que necesitamos es añadir un margen izquierdo para el "content" y el "footer"

body {
margin: 0;
padding: 0;
font-family: verdana, sans-serif;
font-size: 12px;
}

#header {
height: 40px;
background: #ccc;
}

#content {
margin-right: 24%;
margin-left: 24%;
}

#leftbar {
position: absolute;
top: 40px;
left: 0;
width: 20%;
background: #999;
}

#sidebar {
position: absolute;
top: 40px;
right: 0;
width: 20%;
background: #999;
}

#footer {
margin-right: 24%;
margin-left: 24%;
padding: 20px;
background: #eee;
}

Resultado