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:

html<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:

css#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):

css#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:

css#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:

css* {
  box-sizing: border-box;
}

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

css#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):

css#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:

css#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:

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

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

css#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:

html<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>

css* {
  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;
}