Esquema de diseño de dos columnas para un sitio web en CSS

Hagamos un diseño de dos columnas del siguiente tipo:

Para empezar, creemos la estructura básica de la página:

<div id="wrapper">
	<div id="header">
		header
	</div>
	<div id="container">
		<div id="content">
			content
		</div>
		<div id="sidebar">
			sidebar
		</div>
	</div>
	<div id="footer">
		footer
	</div>
</div>

Ahora asignemos estilos al contenedor (wrapper), alineándolo al centro de la pantalla:

#wrapper {
	width: 1000px;
	margin: 30px auto;
	border: 1px solid black;
}

Establezcamos ahora los estilos para el encabezado (header) y el pie de página (footer):

#header {
	height: 200px;
	border: 1px solid black;
}
#footer {
	height: 200px;
	border: 1px solid black;
}

Como puedes ver, asignamos una altura al encabezado y al pie de página. Hacemos esto porque en nuestro esquema no tienen contenido. Si tuvieran contenido, no deberíamos asignar altura a los bloques - esta se formaría a partir de su contenido.

También presta atención al hecho de que no les asignamos un ancho. El motivo es que el encabezado y el pie de página son elementos de bloque y su ancho será automáticamente igual al ancho del contenedor (wrapper).

Vamos a asignarles ahora un padding, para que el texto no quede pegado a los bordes:

#header {
	height: 200px;
	padding: 20px;
	border: 1px solid black;
}
#footer {
	height: 200px;
	padding: 20px;
	border: 1px solid black;
}

Sin embargo, la presencia de padding afectará negativamente al tamaño de los bloques - se volverán más grandes de lo indicado. Cambiemos el comportamiento de todos los bloques para que el padding y los bordes no expandan nuestros bloques:

* {
	box-sizing: border-box;
}

Ahora necesitamos colocar el contenido y la barra lateral en una misma fila. Hagamos esto usando flexbox:

#container {
	display: flex;
}

Indiquemos el ancho para el contenido y la barra lateral. La suma de sus anchos debe ser igual al ancho del contenedor (wrapper):

#content {
	width: 800px;
}
#sidebar {
	width: 200px;
}

Digamos que queremos hacer un margen entre la barra lateral y el contenido. En este caso, necesitamos aplicar un margin a la barra lateral. Al hacerlo, tendremos que quitarle ancho a alguien para este margin. Quitémoslo del contenido, reduciendo correspondientemente su ancho:

#content {
	width: 780px;
}
#sidebar {
	width: 200px;
	margin-right: 20px;
}

Ahora agreguemos altura, ya que nuestros elementos no contienen contenido. Es suficiente agregar altura solo a un elemento, ya que el segundo elemento flex se ajustará en altura (¿por qué?). Asignemos altura al contenido:

#content {
	width: 780px;
	height: 700px;
}
#sidebar {
	width: 200px;
	margin-right: 20px;
}

Agreguemos los estilos restantes al contenido y a la barra lateral:

#content {
	width: 780px;
	height: 700px;
	padding: 20px;
	border: 1px solid black;
}
#sidebar {
	width: 200px;
	margin-right: 20px;
	padding: 20px;
	border: 1px solid black;
}

Listo, nuestro diseño está terminado. Reunamos todo el código:

<div id="wrapper">
	<div id="header">
		header
	</div>
	<div id="container">
		<div id="sidebar">
			sidebar
		</div>
		<div id="content">
			content
		</div>
	</div>
	<div id="footer">
		footer
	</div>
</div>

* {
	box-sizing: border-box;
}

#wrapper {
	width: 1000px;
	margin: 30px auto;
	border: 1px solid black;
}
#header {
	height: 200px;
	padding: 20px;
	border: 1px solid black;
}
#container {
	display: flex;
}
#content {
	width: 780px;
	height: 700px;
	padding: 20px;
	border: 1px solid black;
}
#sidebar {
	width: 200px;
	margin-right: 20px;
	padding: 20px;
	border: 1px solid black;
}
#footer {
	height: 200px;
	padding: 20px;
	border: 1px solid black;
}