Deseño con varias columnas

Este artigo está en construción. Os autores do mesmo están traballando nel.
Se queres axudar á súa realización ou, simplemente, queres facer algún tipo de comentario, envía un mail a un dos autores que aparecen no pé deste artigo."

Condicións

Axustar o deseño para albergar sempre a maior e mais importante columna da páxina independentemente da resolución do monitor no que se mostre.
O contido da páxina débese de axustar ó ancho das pantallas.
Todas as columnas deben ter a mesma altura.
Ningunha columna débese de solapar có pé de páxina.
Compatibilidade con todos os navegadores.

Deseño

Non se van a empregar táboas, aínda que dese xeito sería mais sinxelo pero, iso si, menos flexible que empregar elementos <div>.
O deseño debe axustarse sempre a albergar a maior das columnas da páxina, a que conteña a parte principal da Web.

Cada columna colócase de forma absoluta (en relación ó elemento <div> que as contén a todas), menos a que alberga o contido da páxina, que se colocará de forma estática.

Para facer que as columnas sexan tan altas como o seu contido empregaremos as propiedades de desprazamento top e bottom.
Para facer que ningunha columna se solape có pe de páxina faise que este se situe a continuación do elemento <div> que contén todas as columnas. E, ademais, este elemento <div> será tan alto como a mais alta das columnas secundarias.
Para facer que a páxina aumente o seu ancho nas pantallas de maior resolución e se reduza nas de menor, empregaremos as propiedades de ancho minimun e maximun que CSS nos proporciona.

O Código e a súa Explicación

Segue os seguintes pasos para crear o proxecto presentado:

Creando o XHTML

<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Deseño con varias columnas</title>
	<!--Enlazamos o arquivo .css-->
	<link rel="stylesheet" type="text/css" href="varias-columnas.css" />
</head>

<body>
	<div id="encabezamento">
		<h1>Encabezamento</h1>
	</div>
	
	<div id="contenedor">
		<div id="primeira-columna">
			Texto da primeira columna
		</div>
		<div id="contido">
			Texto da columna Contido
		</div>
		<div id="terceira-columna">
			Texto da terceira columan
		</div>
	</div>
	
	<div id ="pe">
		<h6>Pe</h6>
	</div>
</body>
</html>

Primeiro contido do arquivo .CSS

/* Documento CSS varias-columnas.css*/

body {
	background: white;
	font-family: Arial, Helvetica, sans-serif;
	margin: 0;
	/*padding dun elemento é a cantidade de espazo
	entre o borde e o conteido do elemento.*/
	padding: 0;
	}

h1, h6 {
	margin: 0;
	font-weight: normal;
	}
	
#contenedor {
	position: relative;
	/*A propiedade min-height, establece unha
	 altura mínima para un elemento*/
	min-height: 400px;
		height: auto !important;
  		height: 400px;
	border: 1px solid gray;
	background: lightgrey;
	max-width: 1000px;
	min-width: 750px;
		width: auto !important;
   		width: 750px; 
	margin: auto;
	}

#primeira-columna, 
#terceira-columna {
	position: absolute;
	top: 0;
	bottom: 0;
	border: 1px solid gray;
	background: rgb(240,240,240);
	width: 200px;
	margin: 3px;
	}
	
#primeira-columna {
	left: 0;
	}
	
#terceira-columna {
	right:0;
	}

Primeira modificación

A primeira modificación é no código XHTML. Para que as columnas secundarias poidan ter bordes, espazo de recheo e marxes debemos engadir dous novos elementos <div>, que denominaremos:

<div id="contenedor">
		<div id="primeira-columna">
			<div id="primeira-columna-interior">
				Texto da primeira columna
			</div>
		</div>
		<div id="contido">
			Texto da columna Contido
		</div>
		<div id="terceira-columna">
			<div id="terceira-columna-interior">
				Texto da terceira columan
			</div>
		</div>
	</div>